Vue中路由的重定向
程序员文章站
2022-03-25 08:51:43
...
请陛下批阅
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>路由的重定向</title>
<script src="../../vue/vue-v2.6.11.js"></script>
<script src="../../vue/vue-router-v3.1.6.js"></script>
</head>
<body>
<div id="app">
<!-- 注意: href中写的路径前必须加 # -->
<!--<a href="#/login">登录</a>-->
<!--<a href="#/register">注册</a>-->
<!-- router-link默认渲染为一个 a 标签,
使用 tag 属性可以指定渲染成某个标签
匹配路径前不用加 # -->
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<!-- vue-router提供的元素,有点占位符的味道,
当路径匹配成功后,会把对应的组件渲染到这个位置-->
<router-view></router-view>
</div>
</body>
<script>
var login = {
template: '<h1>登录组件</h1>'
};
var register = {
template: '<h1>注册组件</h1>'
};
// 当导入了vue-router这个包后,window对象中会有一个VueRouter的构造函数
var routerObj = new VueRouter({
// routes: 路由匹配规则数组
routes: [
// path: 匹配路径; component: 路径匹配成功后,显示的组件
// ****注意: component 后面放的是组件对象,不是组件名称****
{path: '/', redirect: '/login'}, //重定向到login组件
{path: '/login', component: login},
{path: '/register', component: register}
]
});
var vm = new Vue({
el: '#app',
// 将路由注册到Vue实例中
router: routerObj
});
</script>
</html>