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類似；

具體以後登錄頁面是否需要這樣傳參，還不清楚，後續再來修改；