vue实现路由跳转
1、子组件:
<template id="login">
<div>我是login组件</div>
</template>
<template id="register">
<div>我是register组件</div>
</template>
<template id="user">
<div>我是user组件</div>
</template>
let Login = {
template: '#login'
}
let Register = {
template: '#register'
}
let User = {
template: '#user'
}
2、父组件的视图层中使用router-link组件,必须要添加router-view组件
<div id="app">
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<router-link to="/user">用户中心</router-link>
<router-view></router-view>
</div>
父组件的数据层引入路由对象(使用router方法就不需要在父组件中在申明子组件名)
let vm = new Vue({
el: '#app',
// 3、引入路由对象
router,
data() {
return {}
}
})
3、使用路由
Vue.use(VueRouter);
4、创建vueRouter路由对象
const router = new VueRouter({
// 配置路由
routes: [{
path: '/login',
name: 'Login',
component: Login
}, {
path: '/register',
name: 'Register',
component: Register
}, {
path: '/user',
name: 'User',
component: User
}]
});
代码演示:
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果