在 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/> 这个就是展示路由内容的标签
来源: http://www.bubuko.com/infodetail-3307743.html