Vue快速学习笔记(5)使用路由vue-router(1)
2020-02-12 19:03:02 Vue
在Vue中使用路由vue-router
-
html
中导入vue-router. -
编写
router-link
和router-view
标签代码 -
JavaScript
中编写模板对象,定义路由对象及创建Vue实例。
具体代码参考:
<div id="app">
<!-- 使用router-link定义组件导航 -->
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<!-- 使用 router-view 显示匹配的组件 -->
<router-view></router-view>
</div>
<script>
const login = {
template: '<h1>登录组件</h1>'
}
const register = {
template: '<h1>注册组件</h1>'
}
// 创建一个路由示例,通过routers属性来匹配规则
const routerobj = new VueRouter({
routes: [{
path: '/',
redirect: '/login'
},
{
path: '/login',
component: login
},
{
path: '/register',
component: register
}
]
});
// 穿件Vue实例
var vm = new Vue({
el: '#app',
router: routerobj
});
</script>
发现错误?想参与编辑?
在 GitHub 上编辑此页!
如果您有什么问题,欢迎加入Python/Javascript学习讨论群询问
Python/Javascript学习QQ群号:217840699