Vue Router：路由、动态路由

安装：

安装：npm i vue-router 
main.js引入： 
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

嵌套路由

在VueRouter的参数中使用children配置。

方式1：

<router-link to="/solution/basis">方案依据</router-link>

{
    path: '/solution',
    component: Solution,
    children: [
        {
           path: '/solution/basis', // 子路由
           component: Basis
        },
        {
           path: '/solution/word',
           component: Word
        }
    ]
},

方式2：

<router-link to="attack" >攻击事件</router-link>
<router-link to="audit" >审计事件</router-link>

// 事件搜索
{
   path: '/event',
   component: Event,
   redirect: '/event/attack',
   children: [
       {
       	   // 当/event/attack 匹配成功
           path: 'attack',
           component: attackEvent
        },
        {
            path: 'audit',
            component: auditEvent
         }
    ]
},

动态路由：

路由传参：

{
    path: '/commentDetail/:id',
    component: CommentDetail
},

跳转： this.$router.push(‘/commentDetail/${tab.name}`);
接收参数：this.$route.params.id;

路由跳转 push

this.$router.push()

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})