认识路由
什么是路由
路由是一套完成映射规则
路由的基本使用
使用的步骤
1.首先引入vue-router.js文件 记住，先引入vue.js文件
2.然后创建 两个 组件，分别用const 接收一下，否则无法绑定到路由上
3.在组件中写好模板内容
4.在#app内创建路由的入口和路由的出口 路由入口的作用？和路由出口的作用
5.创建路由 设置配置项 moutes
6.配置项是数组，每个配置项是一个对象，对象中有两个属性，path和component
7.在vue的实例中绑定路由（很重要）
//html
<div id="app">
<!-- 指定路由入口： -->
<ul>
<!-- to属性 和 路由规则中的 path 相匹配 -->
<li><router-link to="/home">首页</router-link></li>
<li><router-link to="/about">关于</router-link></li>
</ul>
<!-- 指定路由出口： -->
<router-view></router-view>
</div>
//js
// 注册home组件
const Home = Vue.component('home', {
template: `
<div>这是 Home 组件</div>
`
})
// 快速简洁的注册组件：
const About = {
template: `
<h2>这是 About 组件</h2>
`
}
const router = new VueRouter({
// 通过该配置配置路由规则
routes: [
// 每一个路由规则都是一个对象
// path 表示路由规则的路径，不要带有#
// component 用来指定展示的内容，是一个组件
{ path: '/home', component: Home },
{ path: '/about', component: About }
]
})
const vm = new Vue({
el: '#app',
data: {},
// 将路由实例与Vue实例关联到一起
router
})
部分参数说明：
1.router-link
路由的入口函数，
2.router-link 中的to
to属性的作用：o属性 和 路由规则中的 path 相匹配
3.router-view
路由的出口函数，作用是是将对应的功能渲染在这个位置中
4.routes中的配置项 path和 component
path 表示路由规则的路径，不要带有#
component 用来指定展示的内容，是一个组件
5.路由中的默认路由：/ 和路由的重定向属性
默认路由： /
路由的重定向：redirect : '/home'
{ path: '/', redirect: '/home' },
6.精确匹配 exact
用于精确匹配路由，添加类名，对于路由的选择没有影响
默认，没有 exact 属性的时候，高亮类名添加的方式是模糊匹配，只要 哈希值中包含了 to 属性的值，那么，这个 router-link 就会被添加高亮类名
注意：精确匹配和模糊匹配只对添加 样式名称 有效， 对路由的匹配规则无效！！！
7.路由参数
采用动态路由匹配符合条件的哈希值
例如匹配项为： /news/：id
{ path: '/news/:id', component: NewsInfo }
能够匹配的哈希值为：
/news/1 或 /news/2 或 /news/abc
不能匹配的哈希值为：
/abc 或 /news 或 /news/1/a
路由的高亮效果
实现的原理：router-link 会给当前匹配的 导航菜单（路由入口） 添加高亮的类名， 如果要使用第三方的样式库（比如：bootstrp），此时，可以在路由中添加 linkActiveClass 配置项，来将默认的高亮类名修改为 样式库 中对应的高亮类名，这样，路由就可以配合 样式库 来使用了
自定义高亮类名：
linkActiveClass: 'itcast',
linkExactActiveClass: 'my-itcast'
js中获取路由的参数
当/new/1切换到/new/2的时候，渲染同一个组件，vue就会复用这个组件，这样做的目的是性能更高。
缺点：由于第一次渲染的时候钩子函数会执行，通过地址栏的切换，vue复用组件不会再次执行created()钩子函数
解决的方法：使用watch监听路由的变化
$route(to, from) {
console.log('路由参数为：', to.params.id)
}
补充说明：
例如：/new/1切换到/new/2
to指的是： /new/2
from指的是：/new/1
to.params.id指的是获取到的路由的参数
应用场景：
需要根据路由的参数，渲染对应的内容
网友评论