vue-router实现几级页面跳转及传参

之前并不知道vue-cli多用于单页面应用，对于现在的多页面跳转只能用路由来实现，当然我也是初步了解。

要求：登录页面-权限页面-内容页面

对于页面跳转，就不能使用

<p>

<router-link to="/foo">Go to Foo</router-link>

<router-link to="/bar">Go to Bar</router-link>

</p>

<!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 -->

<router-view></router-view>

此种有按钮点击进行内容切换效果，而我需要的是点击按钮进入一级级页面，只能动态配置路由了

页面：login.vue ,permission.vue,content.vue

一、app.vue

<template>
    <div> 
        <router-view></router-view>
    </div>
</template>

二、index.js（路由配置）

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/login/login.vue'
import Permission from '@/login/permission.vue'
import Home from '@/components/home.vue'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',(默认进入登录页面）
      name: 'Login',
      component: Login
    },
    {

       path: '/permission',

       //path: '/permission/:id',以后可以加参数

       name: 'Permission',
       component:Permission
     },
    {
      path: '/home',
      name: 'Home',
      component: Home
    }
  ]

})

三、login.vue和permission.vue

<button class="tj" @click=dl>登 录</button>

dl(){
    this.$router.push('/permission')
    //this.$router.push({ name:'Permission',path: '/permission', params: { id: 2}})以后可加参数
}

permission.vue类似；

具体以后登录页面是否需要这样传参，还不清楚，后续再来修改；