vue-cli3路由

 

在vue-cli3，如果想使用路由，就要先創建一個router.js文件，與main.js平級

如圖： 

 

然后配置router.js

import Vue from 'vue'
import Router from 'vue-router'

//組件模塊
import Pagea from './pages/pagea'
import Pageb from './pages/pageb'

Vue.use(Router);

export default new Router({
    routes: [
        {path: '/pagea', name:'Pagea',component: Pagea},
        {path: '/pageb',name:'Pageb',component: Pageb},
        {path: '/',redirect:'/pageb'}
    ]
})

這里我用的是我自己學習路由用的

 

main.js中要加入  

import router from './router'

Vue.use(router);
new Vue({
　　...,
　　router
})

接下來在頁面中引進路由

<router-link to="/pagea">組件內跳向第一個頁面</router-link>    <router-link>是vue-cli中路由的標簽，to就是之前router.js中的path字段。

在需要展示的地方，加入一個

<router-view/>    這個就是展示路由內容的標簽