前提:安装了vue并且能正常使用
1.cnpm i vue-router -S
安装包
2.在main.js
文件中引入vue-router
import VueRouter from 'vue-router'
Vue.use(VueRouter)
3…在main.js
引入路由页面
import account from './main/account.vue'
import goodlist from './main/GoodList.vue'
4.在main.js
创建路由对象,并配置:
let router = new VueRouter({
routes:[
{path:'/account',compoent:account},
{path:'/goodlist',compoent:goodlist}
]
})
5.将路由对象那个挂在到vm上
,
router
6.将组件显示的位置放在主页面里面,可以实现点击切换显示:
<router-link to="/account">Account</router-link>
<router-link to="/goodlist">GoodList</router-link>
<router-view></router-view>
实现路由嵌套(在组件里显示子组件)
1.创建两个子组件
2.在某个组件(account.vue)里放入显示子组件的位置:
<template>
<div>
<h1>这是account组件</h1>
<router-link to="/account/login">登陆</router-link>
<router-link to="/account/register">注册</router-link>
<router-view></router-view>
</div>
</template>
3.在mai.js
中引入两个组件
import login from './subcom/login.vue'
import register from './subcom/register.vue'
在父组件的路由匹配规则里面添加children属性,然后书写两个子组件的匹配规则
{path:'/account',
component:account,
children:[
{path:'login',component:login},
{path:'register',component:register}
]
},
5.实现效果