在vue组件页面中,集成vue-router路由模块
vue-router官网
1.导入路由模块:
import VueRouter from 'vue-router'
2.安装路由模块:
Vue.use(VueRouter);
3.导入需要展示的组件:
import login from './components/account/login.vue'
import register from './components/account/register.vue'
4.创建路由对象:
var router = new VueRouter({
routes: [
{ path: '/', redirect: '/login' },
{ path: '/login', component: login },
{ path: '/register', component: register }
]
});
5.将路由对象,挂载到 Vue 实例上:
var vm = new Vue({
el: '#app',
// render: c => { return c(App) }
render(c) {
return c(App);
},
router // 将路由对象,挂载到 Vue 实例上
});
6.改造App.vue组件,在 template 中,添加router-link和router-view:
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>