vue-cli3路由

烂漫一生 提交于 2019-12-06 00:13:05

 

在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/>    这个就是展示路由内容的标签

 

 

 

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!