Vue-router

Vue-router

定义：hash地址与组件的关系
工作方式：

• 用户点击路由链接，导致url地址栏中的hash值放生了变化
• 前端路由监听到了hash地址变化，把hash地址对应的组件渲染在浏览器

hash: 就是href地址中 #开始往后的部分（包括#）

路由通过监听hash实现功能

window.οnhashchange=()=>{
console.log( “监听到了hash地址变化”，location.hash )
}

实现原理

1. 在a链接href=hash地址，跳转到该页面中对应的组件位置
2. 多个a链接存在，若页面只存在一个对应组件，则用动态组件component占位
3. 在component中属性is=“变量” 动态绑定组件名字，点击不同a链接，改变变量的值，即切换对应的组件名字

---

1. 安装vue-router

npm i vue-router -S

2. 在src文件下创建router文件夹下新建index.js路由模块
3. 在index.js中

1. 导入Vue和VueRouter包
   import Vue from “vue”
   import VueRouter from “vue-router”
2. 调用Vue.use() 函数把VueRouter安装为Vue 的插件
   Vue.use(VueRouter)
3. 创建路由的实例对象
   const router = new VueRouter()
4. 向外导出暴露路由的实例对象
   export default router

4. 在main.js中导入路由模块,再vue实例上进行挂载

import router from “@/router/index.js”
再vue实例中挂载
new Vue({
render:h=>h(App),
router:router
}).$mount(“#app”)

5. 在router的index.js中创建hash与组件之间的关系

1. 先导入相应的组件 import Home from “@/components/Home.vue”
2. 在路由的实例对象中添加routes数组，定义hash与组件的关系

const router =new VueRouter({
	routes:[
	{path:'/home' , component: Home},
	{path:'hash地址',component:组件名},
	···
	]
})

路由懒加载：index.js中不用引入组件
{ path:‘hash地址’ , component: ()=> import(“组件地址”) } ,

因为使用了路由懒加载的形式，在对应路由加载成功之前都会是’/'；跳转时都会是这个默认的路由，可以不用路由懒加载或则用watch监听route来获取

6. 组件中使用路由加载其他组件

<template>
	/*用router-link 代替a标签 */
	<router-link to="/home">点我展示Home组件</router-link>
	
	/*只要安装了vue-router就可以使用<router-view>这个组件，它的作用就是占位符，给组件占位子*/
	<router-view></router-view>
</template>

7. 路由重定向

在访问地址A时，强制跳转到地址C，通过redirect属性

{path:"/" , redirect: "/home"},
{path:"/home" , component:Home}

通过redirect属性，将访问"/“地址时，强行跳转到了”/home"地址

8. 路由嵌套

• 子级组件中添加 路由链接 router-link to=“/home/son” （to所接收的值是该子组件的hash地址和它的子组件的hash地址 ）和 路由占位符 router-view
• 在router/index.js路由模块中，导入需要的组件，并使用children属性配置路由规则

import Son from "@/components/Son.vue"

const router =new VueRouter({
		routes:[
		{path:'/home' , component: Home,
		children:[
			//子路由规则，写法一样
			{path:"son" , component: Son },//注意：children中path不需要/开头
			]
		}]
})

默认子路由：如果children数组中，某个路由的path是空值，则这条路由就叫默认子路由，相当于重定向到该条路由

9. 动态路由匹配

多个router-link指向同一个组件
动态路由把hash地址中可变的部分定义为路径参数项，提高复用性

//组件中
<router-link to="/movie/1"> 电影1 </router-link>
<router-link to="/movie/2"> 电影2 </router-link>
<router-link to="/movie/3"> 电影3 </router-link>
//router index.js中
{path:"/movie/1" , component: Movie}
{path:"/movie/2" , component: Movie}
{path:"/movie/3" , component: Movie}

//路由中的动态参数以 : 进行声明，冒号后面是动态路径参数的名称
{path:"/movie/:id" , component: Movie}
// :id (id自定义)就是占位符，是动态可变的，可以在$route.params中拿到 id

10. router与route的区别

this.$route 是路由的 参数对象: 参数有 path–路径参数 fullpath–路径参数+查询参数

---

this.$router 是路由的导航对象

11. 有动态路由时，可以开启props传参，可以获取动态路由的路径参数项

1. 在router/index.js中开启props
   {path: “/movie/:mid” , component:Movie , props:true}
2. 在该组件中用props接收数据,获取动态路由路径参数项
   props:[“mid”]

12. 路径参数与查询参数

1. 在hash地址中，/ 后面的参数项，叫做“路径参数”
   路径参数可以使用this.$route.params获取或者 开始props传参获取
2. 在hash地址中，?后面的参数项，叫做“查询参数”
   查询参数使用this.$route.query来获取

13. 声明式导航 与 编程式导航

在浏览器中，点击链接实现导航，叫做声明导航。如a链接、router-link
在浏览器中，调用api方法实现导航，叫做编程式导航。如location.href

14. vue-router 导航api

this.$router.push(“hash地址”)；增加一条历史记录

this.$router.replace(“hash地址”)； 替换当前的历史记录

this.$router.go(数值n) -1表示后退一层，0表示刷新，1前进一层

this.$router.back() 表示后退

this.$router.forward() 表示前进

15. 导航守卫
    导航守卫可以控制路由的访问权限
    1. 全局前置守卫 路由的跳转必会触发router.beforeEach回调函数

router.beforeEach( (to, from ,next )=>{	
	//to 表示将要访问的路由的信息对象
	//from 表示将要离开的路由的信息对象
	//next() 函数表示放行的意思;强制到登录页next("/login");停留当页next(false)
} )

2.	全局路由后置守卫，跳转过后触发，可以用来改 页面title

注意：
路由配置的时候，可以使用meta:{key:value}传递一些参数；参数存放在$route.meta 中；一般放网页title，和isAuth：true/false判断是否需要前置验证

3. 独享路由守卫

在路由配置中设置 beforeEnter:(to, from, next)=>{}

4.	组件类守卫

问题

1. 在路由守卫中用next（）强制跳转到某页时，出现下列问题
   
   改用 router.push({ path: ‘/login’ }) 就解决了