vue.js 使用vue-router的动态路由时，为什么刷新就没了那个组件了

Question

路由配置是这样的

{
      path: '/news',
      name: 'News',
      component: News,
      children: [
        {
          path: 'comNews',
          name: 'ComNews',
          component: ComNews
        },
        {
          path: 'realNews',
          name: 'RealNews',
          component: RealNews
        },
        {
          path: 'mediaNews',
          name: 'MediaNews',
          component: MediaNews
        },
        {
          path: 'newsDet?id=:id',
          name: 'NewsDet',
          component: NewsDet
        },
      ]
    },

新闻组件的结构是这样的：它有四个子组件,前三个是新闻的类别，第四个是新闻详细页面组件。
点击不同的新闻类别显示相应的新闻类别的新闻条目（改变子组件的内容），点击新闻条目显示该新闻的详细内容（改变子组件的内容）。
路径是这个：http://localhost:8080/news

路径是这个：http://localhost:8080/news/ne...

但是在这个页面刷新的时候整个新闻组件就会没了。

Answer 1

代码实现
GitHub: vue 动态路由权限管理

思路

用户登录成后，把用户信息保存至localStorage 和 vuex，用addRutes动态添加路由。 然后用 localStorage 和 vuex相结合，解决用户刷新路由无效问题

用户登录
  ↓
  - 成功
    ↓
    - 把用户信息保存至vuex
    - 把用户信息保存至localStorage
    - 用addRutes动态添加路由并跳转至首页
  ↓
  - 失败
    ↓
    - 继续登录

拦截路由变化
  ↓
  - 判断vuex中是否有用户信息
    ↓
    - 有用户信息
      ↓
      - 验证token
        ↓
        - token验证通过
          ↓
          - 跳转路由
        ↓
        - token验证不通过
          ↓
          - 跳转登录页面
    ↓
    - 没有用户信息
      ↓
      - 判断localStorage中是否有用户信息
        ↓
        - 有用户信息
          ↓
          - 验证token
            ↓
            - token验证通过
              ↓
              - 获取localStorage用户信息
                ↓
                - 设置vuex中的用户信息
                ↓
                - 重新设置用户路由
            ↓
            - token验证不通过
              ↓
              - 跳转登录页面
        ↓
        - 没有用户信息
          ↓
          - 跳转登录

Answer 2

<router-link :to="{path:'/news/newsDet', query: {id: id}}">Links</router-link>
<!-- 或者 -->
<router-link :to="{name:'newsDet', query: {id: id}}">Links</router-link>