路由配置
一、vue-router 安装和基本路由
① 安装 vue-router 包 ：npm i [email protected] -S【vue2项目用这个，最新版的只支持vue3，】
② 创建路由模块：@/router/index.js 进行配置
③ 导入main.js并挂载路由模块
④ 声明路由链接和占位符
① 安装 vue-router 包
根据不同的地址打开、关闭不同的组件，#开头才是hash地址
这里以创建Home和User两个组件来作例
②创建@/router/index.js，在其中配置
1.导入VueRouter
import Vue from 'vue'
import VueRouter from 'vue-router'
2.把VueRouter安装为Vue项目的插件
Vue.use(VueRouter)
3.创建路由实例对象，在路由规则中声明路由链接
// routes是一个关键字数组，用于定义 hash地址 与 组件 的对应关系
// redirect用于重定向，当用户访问 / 则直接强制跳转到 /home
const router = new VueRouter({
routes:[
{ path: '/' , redirect: '/home'},
{ path: '/home' , component: Home},
{ path: '/user' , component: User}
]
})
4.向外共享路由的实例对象
export default router
5.创建需要路由的组件
@/components/aHome.vue
<div>
<h1>这里是首页！</h1>
</div>
@/components/aUser.vue
<div>
<h3>这里是用户！</h3>
</div>
6.导入需要路由的组件
import Home from '@/components/Home.vue'
import User from '@/components/Home.vue'
③ 在main.js中导入
1.导入VueRouter 路由模块
import router from '@/router/index.js'
// 可简写如下，会自动找到文件夹内的index.js
//import router from '@/router'
2.挂载
new Vue({
render: h => h(App),
router//加入这个
}).$mount('#app')
④在App.vue的template中添加占位符
<router-view></router-view>
⑤进行测试：
<!-- 用于测试，注意这里需要# -->
<a href="#/home">首页</a>
<a href="#/user">用户</a>
⑥改进：配置router-link来替代a链接
<!-- 这里不需要#，它自己会添加 -->
<router-link to="/home">首页</router-link>
<router-link to="/user">用户</router-link>
二、实现嵌套路由
原理：在link中嵌入view，view里面再放两个link，link又是放一个view，这里就结束了。
在用户组件下创建两个组件：用户1、用户2，并在用户组件中添加两个链接方便索引
①在aUser.vue中
<div>
<h1>这里是用户！！</h1>
<router-view></router-view>
<hr />
<router-link to="/user/user1">用户1</router-link>
<router-link to="/user/user2">用户2</router-link>
</div>
②创建子组件
@/components/tab/tab1.vue、@/components/tab/tab2.vue内容
<div>
<h1>你好，我是用户1/2！</h1>
</div>
③在@/router/index.js中配置
导入
import User1 from '@/components/tab/tab1.vue'
import User2 from '@/components/tab/tab2.vue'
加入
const router = new VueRouter({
routes:[
{ path: '/' , redirect: '/home'},
{ path: '/home' , component: Home},
{ path: '/user' , component: User, children:[
//可添加一个属性redirect:'/user/user1'默认路由user1，点击用户时会自动打开与下面的{path: '' , component: User1}同功能
// 设定子路由规则
{path: '' , component: User1},
{path: 'user2' , component: User2},
]},
]
})
注：User里的链接地址要和router/index.js里面的path一致
三、实现动态路由
动态路由：把hash地址可变的部分定义为参数，用 “:”，提高复用性
①在app.vue
<router-link to="/movie/1">电影2</router-link>
<router-link to="/movie/2">电影2</router-link>
<router-link to="/movie/3">电影2</router-link>
②在@/router/index.js
改进一：
原本
{ path: '/movie/1' , component: Movie},
{ path: '/movie/2' , component: Movie},
{ path: '/movie/3' , component: Movie},
改进
{ path: '/movie/:mid' , component: Movie},
{{this.$route.params.mid}}这是电影的id，this.$route是路由的参数对象。this.$route是路由的导航对象。
改进二：
在indexjs
//为路由规则开启props传参
{ path:'movie/:mid',component:Movie,props:true}
在movievue
export default{
props:[],
}
{{mid}}此时，这是电影的id
四、编程式导航
push、replace、to
声明式导航
通过链接跳转的，如a链接，router-link链接
编程式导航
浏览器中调用API实现导航。
this.$router.push('address_hash')
this.$router.replace('address_hash')
this.$router.go(N)
前置知识
手动模拟路由是很累的，就像是要在做饭了，自己从开始打造一口锅子。
/movie/2?name=zs
/后的参数，是路径参数。/movie/2是路径参数。this.$params.path来访问
?后面的参数，是查询参数。name=zs是查询参数。this.$params.query来访问
/movie/2?name=zs，是完整的值。this.$params.fullpath来访问这一完整的路径
SPA
SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。此时，不同组件之间的切换需要通过前端路由来实现
前端路由：Hash 地址与组件之间的对应关系，vue-router 管理 SPA 项目中组件的切换。
路由：哈希地址和组件的对应关系，id 与 name
push、go页面跳转，导航守卫
当前用户拥有后台主页的访问权限，直接放行：next()
当前用户没有后台主页的访问权限，强制其跳转到登录页面：next('/login')
当前用户没有后台主页的访问权限，不允许跳转到后台主页：next(false