vue中路由重定向
程序员文章站
2022-03-24 19:12:57
...
路由匹配展示的过程:
- 当点击a标签(或者直接修改浏览器地址栏中的哈希值)会改变哈希值
- 当哈希值发生改变,Vue路由就会监听到这个变化
- 当路由监听到哈希值改变以后,就会用配置好的路由规则来匹配当前的哈希值
- 当哈希值被匹配成功,就会将当前路由规则对应的组件展示在页面中 router-view 中
land.vue界面
<template>
<div id="land">
<h1 id="nav">
<router-link to="/login">登陆</router-link>
<router-link to="/regist">注册</router-link>
</h1>
<router-view/>
</div>
</template>
route.js页面
import Vue from "vue";
import Router from "vue-router";
import Login from "../views/User/Login.vue";
export default new Router({
routes: [
{
path: "/",
redirect: "/login" // 路由重定向: 定义指向到 login登录页面
},
// {
// path: "/",
// redirect: "/regist" // 路由重定向: 定义指向到 regist登录页面
// },
{
path: "/",
name: "Land",
component: () => import("../views/Land.vue"), // 指向默认打开的页面
children: [
{
path: "/login",
name: "login",
component: Login // 指向登录页面的组件
},
{
path: "/regist",
name: "regist",
component: () => import("../views/User/Regist.vue") //指向注册页面的组件
}
]
}
]