<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- 第一步:引入文件 -->
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<style>
.router-link-active,
.active {
color: red;
font-size: 20px;
background-color: lightcyan;
padding: 5px 10px;
border-radius: 10px;
}
.exact-active {
text-decoration: none;
}
</style>
</head>
<body>
<div id="app">
<h1>这是根组件</h1>
<!-- <a href="#/login">登录</a>
<a href="#/regist">注册</a> -->
<!-- vue-router 专门提供了用于访问路由的链接标签,取代a标签。这个router-link最终还是会被渲染成a标签 -->
<router-link to="/login">登录</router-link>
<router-link to="/regist">注册</router-link>
<hr />
<!-- 第五步: 在父组件模板中给子组件的展示设置占位符 -->
<!-- router-view :Vue提供的内置组件,主要负责展示匹配到的组件内容 -->
<router-view></router-view>
</div>
<script>
// 第二步,创建两个组件,通过 vue-router组件
let login = {
template: "<h1>登录组件</h1>",
mounted() {
console.log("登录组件渲染完成");
},
destroyed() {
console.log("login组件被销毁");
},
};
let regist = {
template: "<h1>注册组件</h1>",
mounted() {
console.log("注册组件渲染完成");
},
destroyed() {
console.log("regist组件被销毁");
},
};
// 第三步: 创建 vue-router 实例对象,用这个对象给每一个组件设置一个路由,让这个路由和组件关联起来,当浏览器访问这个路由的时候,就可以加载该路由对应的组件
const router = new VueRouter({
// routes 这个属性是固定的m它是保存当前页面所有路由的属性,当浏览器访问的时候,就会来这里进行匹配。
routes: [
{ path: "/login", component: login },
{ path: "/regist", component: regist },
// 路由重定向 redorect, 网页默认向 / 发送请求, vue-router监听这个请求,自动重定向/login 路由,从而记载登录组件
{ path: "/", redirect: "/login" },
],
linkActiveClass: "active", // 通过这个配置项,可以自定义路由连接被激活时的类名,这个可类名只要模糊匹配路由成功,就会被添加
linkExactActiveClass: "exact-active", //这个是 router-link 中的 to 属性值必须和声明的path属性值一样,才能添加这类名,它是一个精确匹配
});
// 第四步,在Vue实例中注册路由对象
let vm = new Vue({
el: "#app",
router: router,
});
</script>
</body>
</html>
效果如下：
