在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/> 这个就是展示路由内容的标签
原文:https://www.cnblogs.com/sukehao/p/11952969.html