v-router路由
路由的本质就是对应关系(Hash地址与组件之间的对应关系)
Hash地址：在URL地址栏中，从 # 号开始(包含#号)往后都属于Hash地址
前端路由(Hash)的工作方式：
- 用户点击了页面上的路由链接
- 导致了URL地址栏中的Hash值发生了变化
- 前端路由监听到了 Hash 地址的变化
- 前端路由把当前Hash地址对应的组件渲染到浏览器中
前端路由的底层原理：
通过监听浏览器中 onhashchange 事件，当监听到 hash 地址发生了变化，通过 location.hash 获取当前 hash 地址。就让 hash 地址对应的组件渲染出来
基本使用
# 安装 vue-router 包
npm i vue-router@3.5.2 -S
# 创建路由模块
# 在src目录下新建 router/index.js 路由模块
# 在 router/index.js 路由模块中声明 hash地址与组件之间的路由规则
// 1、导入 vue、VueRouter包
import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入需要的组件
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'
import Movie from '@/components/Movie.vue'
// 2、调用 Vue.use() 函数，把 VueRouter 安装为 Vue 的插件
Vue.use(VueRouter)
// 3、创建路由的实例对象------并根据路由链接声明 hash地址与组件之间的路由规则 --------
const router = new VueRouter({
// routes 是一个数组，作用:定义 'hash地址' 和 '组件' 之间的路由规则
routes:[
// 当 hash地址为 #/home 时，hash地址对应的组件为 Home。
{path:"/home",component:Home},
// 当 hash地址为 #/about 时，hash地址对应的组件为 About。
{path:"/about",component:About},
// 当 hash地址为 #/movie 时，hash地址对应的组件为 Movie。
{path:"/movie",component:Movie}
]
/*
path 表示当前访问的 hash地址。注意：不需要写 "#"
component 表示当前hash地址所对应要展示的组件
*/
})
// 4、对外共享路由实例对象
export default router
# 在 main.js 打包入口文件中导入并挂载路由模块---通过 router 节点进行挂载
// 在模块化导入的时候，如果给定的是文件夹，则默认导入的是当前文件夹下名字为 index.js 的文件
import router from '@/router/index.js'
new Vue({
render: h => h(App),
// 通过 router:路由的实例对象 的方式挂载路由
router: router // 属性名和属性值一样可简写为 router
}).$mount('#app')
# 声明路由链接和占位符
# <router-link to='Hash地址'></router-link> 路由链接
# <router-view></router-view> 占位符
<template>
<div class="app-container">
<h1>App2 组件</h1>
<hr />
// 声明路由链接
<!-- 只要在项目中安装和配置了 vue-router，就可以使用 <router-link> 来代替普通的a标签,且不需要写 "#" 号 -->
<router-link to="/home">首页</router-link>
<router-link to="/movie">电影</router-link>
<router-link to="/about">关于</router-link>
<!-- 只要在项目中安装和配置了 vue-router，就可以使用 <router-view> 组件，也是占位符,用于给组件占位渲染组件 -->
<router-view></router-view>
</div>
</template>
redirect路由重定向
路由重定向：用户在访问 地址A 时，强制页面跳转到 地址C，从而展示特定的页面
const router = new VueRouter({
routes: [
// 当访问 / 时，通过 redirect 属性重定向跳转到 /home 对应的路由规则
{ path: '/', redirect: '/home' },
// 当 hash地址为 #/home 时，hash地址对应的组件为 Home。
{ path: '/home', component: Home }
]
})
嵌套路由
通过路由实现组件的嵌套展示。点击父级路由链接显示模版内容，模版内容中又有子级路由链接，点击子级路由链接显示子级模版内容
// 子级路由 About.vue 子组件
<template>
<div class="about-container">
<h3>About 组件</h3>
<!-- 声明路由链接 -->
<router-link to="/about/tab1">tab1</router-link>
<router-link to="/about/tab2">tab2</router-link>
<hr />
<!-- 子级路由占位符 -->
<router-view></router-view>
</div>
</template>
// 在 router/index.js 路由模块中声明路由规则---通过 children 属性生命子路由规则
import Tab1 from '@/components/tabs/Tab1.vue'
import Tab2 from '@/components/tabs/Tab2.vue'
const router = new VueRouter({
routes: [
// 当 hash地址为 #/about 时，hash地址对应的组件为 About。
{
path: '/about',
component: About,
// 重定向,当访问地址为 /about 时，直接展示 /about/tab1 组件
redirect: '/about/tab1',
children:[ // 再通过 children属性 嵌套声明子级路由规则
// 当 hash地址为 #/about/tab1 时，展示 Tab1 组件。
{ path: 'tab1', component: Tab1},
// 当 hash地址为 #/about/tab2 时，展示 Tab2 组件。
{ path: 'tab2', component: Tab2},
]
}
/*注意：
在子路由规则中，path属性一般都不需要加 "/"，加了 “/” 表示当前从根路径出发，如果需要路由链接从根路径出发，此时就可以使用 "/"
*/
]
})
动态路由匹配
动态路由：把 Hash 地址中可变的部分定义为参数项，从而提高路由规则的复用性
在 vue-router 中可以使用 英文的冒号(:) 来定义动态的参数项，如：
// 动态参数以 冒号(:) 进行声明,冒号后面就是动态参数的名称
{ path: '/movie/:id', component: Movie }
// 下面的路由链接将会匹配上面的动态路由规则
<router-link to="/movie/1">电影1</router-link>
<router-link to="/movie/2">电影2</router-link>
<router-link to="/movie/3">电影3</router-link>
$route 路由参数对象
在 $route 路由参数对象中
path 属性只包含路径部分。如： '/movie/1'
fullPath 属性包含完整的Hash地址。如： '/movie/1?name=zs&age=20'
query 通过query传递的参数在这里接收
params 通过params传递的参数在这里接收
为路由开启props传参
/* 在 router/index.js 路由模块中 */
// 在路由规则中添加 props:true 属性即可开启 props 传参
{ path: '/movie/:mid', component: Movie, props: true}
/* 在 Movie.vue 组件中 */
<template>
<div class="Movie-container">
<h3> Movie.vue 组件 </h3>
<hr>
<!-- 使用路由中的 动态参数 -->
<p>路由传递的参数为--{{ mid }}</p>
</div>
</template>
<script>
export default{
name: 'Movie',
// 用于接收 props 数据(这里用于接受路由中的动态参数)
props:['mid']
}
</script>
路由导航
导航：点击链接，导致页面的跳转、组件的切换
在浏览器中，点击链接实现导航的方式，也叫声明式导航，如：
- 普通网页中点击
<a>链接、vue项目中点击<router-link>都属于声明式导航在浏览器中，调用 API方法 实现导航的方式，也叫编程式导航，如：
- 普通网页中通过调用 location.href 跳转到新页面的方式就属于编程式导航
vue-router中的编程式导航
在
vue-router中$router是路由导航对象，提供了编程式导航的 API
this.$router.push()
this.$router.push('hash地址') 用于跳转到指定的 hash 地址，并增加一条历史记录
/*
this.$router.push('hash地址')
注意：hash地址不需要写 # 号
其中参数也可以为对象：
this.$router.push({
url: '要跳转到的页面的地址', // 必填
name: '要跳转到的页面在定义路由时的name值' // 可选，在传递查询params参数时为必填
query: {} // 路径参数填写到这里
params: {} // 查询参数填写到这里
})
*/
this.$router.push('/movie/1')
this.$router.replace()
this.$router.replace('hash地址') 用于跳转到指定的 hash 地址，并替换当前的历史记录
/*
this.$router.replace('hash地址')
注意：hash地址不需要写 # 号
*/
this.$router.replace('/movie/2')
this.$router.go()
this.$router.go(数字n) 用于在浏览器历史中前进和后退
/*
this.$router.push(数值)
注意：
参数数值如果为整数，则表示前进，负数表示后退
数值表示前进或后退几个页面
*/
this.$router.go(-1)
简化用法
一般开发中只需要前进或后退一步，因此 vue-router 还提供了 back和forward 两个便捷方法
- this.$router.back() 在历史记录中，后退到上一个页面
- this.$router.forward() 在历史记录中，前进到下一个页面
