7-1.什么是路由
路径：就是我们通过不同的 URL 访问不同的内容。
7-2.Vue 路由的安装
npm install vue-router
7-3.Vue 路由的简单案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.bootcss.com/vue-router/2.8.1/vue-router.min.js"></script>
<title>路由</title>
<style>
._active {
color: red
}
._activeTwo {
color: pink
}
</style>
</head>
<body>
<div id="root">
<h1>hello 路由!</h1>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<p>
<router-link to="/header">go header</router-link>
<router-link to="/footer">go footer</router-link>
</p>
<!-- <router-link> replace 和 append的应用 标签 -->
<p>
<router-link :to="{path:'/header'}" replace>go header(replace)</router-link>
<router-link :to="{path:'footer'}" append>go footer(append)</router-link>
</p>
<!-- <router-link> tag 渲染 -->
<p>
<router-link :to="{path:'/header'}" tag="li">go header(tag)</router-link>
</p>
<!-- <router-link> exact-active-class 和 active-class 渲染 -->
<p>
<router-link :to="{path:'/header'}" exact-active-class="_active">go header(exact-active-class)</router-link>
<router-link :to="{path:'/footer'}" active-class="_activeTwo">go header(active-class)</router-link>
</p>
<!-- <router-link> event渲染 -->
<p>
<router-link :to="{path:'/header'}" @click.native="mouseover">go header(event)</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
<script>
//0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用Vue.use(VueRouter)
//1. 定义路由组件
//可以从其他文件 import 进来
const Footer = { template: '<div>footer</div>' };
const Header = { template: '<div>Header</div>' };
//2. 定义路由
//每个路由应该映射一个组件。其中”compoment“ 可以是：
//通过Vue.extend() 创建的组件构造器
//或者，只是一个组件对象
const routes = [
{ path: '/header', component: Header },
{ path: '/footer', component: Footer }
]
//3. 创建router实例，然后传 `routes` 配置
const router = new VueRouter({
routes
})
var app = new Vue({
el: '#root',
router,
methods: {
mouseover: function () {
console.log(1111);
}
},
})
</script>
</body>
</html>
效果
7-4.router-link的相关配置
1）、to 表示路由链接
当被点击后，内部会立即把to的值传到router.push,所以这个值可以是一个字符串或者是描述目标位置的对象
<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">Home</a>
<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>
<!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link>
<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>
<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
2)、replace
设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，导航后不会留下 history 记录。
<router-link :to="{ path: '/home'}" replace></router-link>
3)、tag
有时候想要 <router-link> 渲染成某种标签，例如 <li>。 于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。
<router-link to="/foo" tag="li">foo</router-link>
<li>foo</li>
4)、active-class
设置 链接激活时使用的 CSS 类名。可以通过以下代码来替代。
<style>
._active{
background-color : red;
}
</style>
<p>
<router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link>
<router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>
注意这里 class 使用 active_class="_active"。
5)、exact-active-class
配置当链接被精确匹配的时候应该激活的 class。可以通过以下代码来替代。
<p>
<router-link v-bind:to = "{ path: '/route1'}" exact-active-class = "_active">Router Link 1</router-link>
<router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>
6)、event
声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。
<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>
以上代码设置了 event 为 mouseover ，及在鼠标移动到 Router Link 1 上时导航的 HTML 内容会发生改变。
7)、exact-active-class 和 active-class 的区别
exact-active-class:路由严格匹配
active-class:路由模糊匹配
如果你访问的是：
/article或者/article/1
<router-link to="/article" active-class="router-active"></router-link>
都会被渲染
<a href="#/article" class="router-active" rel="nofollow"></a>
而
<router-link to="/article" exact-active-class="router-active"></router-link>
只有访问/article/1
才会被渲染
<a href="#/article" class="router-active" rel="nofollow"></a>
如果是/article，class不会被渲染出来
<a href="#/article" rel="nofollow"></a>
更多
上一篇：第6章 Vue 动画
下一篇：第8章 Vue项目预热
全篇文章：Vue学习总结
所有章节目录：Vue学习目录
网友评论