文件目录:
· 第一步:引用vue和vue-router ,Vue.use(VueRouter)
/* eslint-disable*/
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
·第二步:引用定义好的路由组件
import ChildOne from '../components/childOne'
import ChildTwo from '../components/childTwo'
·第三步:定义路由(路由对象包含路由名、路径、组件、参数、子路由等),每一个路由映射到一个组件
·第四步:通过new Router来创建router实例
export default new Router({
routes: [
{
path: '/one',
name: 'ChildOne',
component: ChildOne
},
{
path: '/two',
name: 'ChildTwo',
component: ChildTwo
}
]
})
·第五步:在main.js中将路由实例挂载到vue根实例上,使得整个应用都有路由功能,如下
import router from '../src/router/index.js'
new Vue({
el: '#app',
router,
components: { App },
template: ' '
})
·第六步:在组件中使用router-link 标签实现跳转路由、使用router-view来实现路由显示,如下
显示第一个页面
显示第二个页面
该demo中的childOne.vue组件文件
这是子组件1的内容!!!
!!!这是第1个路由的页面!!!
childTwo.vue组件文件
这是子组件2的内容
这是第二个路由显示的页面怎么样
注意:在组件中可以使用this.$router访问路由器,可以使用this.$route访问当前路由;
实现效果:
使用方法:在router/index.js中定义路由对象时,使用children:[{...},{...}]的形式设置下级路由及映射组件,如下在one路由下设置了log和reg路由
export default new Router({
routes: [
{
path: '/one',
name: 'ChildOne',
component: ChildOne,
children:[
{
path:'log',
component:Log,
},
{
path:'reg',
component:Reg,
},
],
},
{
path: '/two',
name: 'ChildTwo',
component: ChildTwo
}
]
})
childOne.vue中使用二级路由
这是子组件1的内容
下面开始点击显示嵌套的子路由
显示登录页面
显示注册页面