【Vue2】Router 路由
1.什么是单页面应用程序
单页面应用程序(英文名: Single Page Application)简称SPA,
顾名思义，指的是一个Web网站中只有唯一-的一-个HTML页面，
所有的功能与交互都在这唯--的一个页面内完成。
结论:在SPA项目中，不同功能之间的切换，要依赖于前端路由来完成!
4.什么是前端路由
通俗易懂的概念: Hash地址与组件之间的对应关系。
5.前端路由的工作方式
① 用户点击了页面.上的路由链接
② 导致了URL地址栏中的Hash值发生了变化
③ 前端路由监听了到Hash地址的变化
④ 前端路由把当前Hash地址对应的组件渲染都浏览器中
6、手写路由案例：
<template>
<div id="app">
<a href="#/index">首页</a> |
<a href="#/movie">电影</a> |
<a href="#/about">关于</a>
<component :is="routerName"></component>
</div>
</template>
<script>
import Home from '@/components/Home.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'
export default {
name: 'App',
components: {
Home,
Movie,
About
},
data() {
return {
routerName: ''
}
},
created() {
window.onhashchange = () => {
const hash = location.hash
switch (hash) {
case '#/home':
this.routerName = 'Home'
break
case '#/Movie':
this.routerName = 'Movie'
break
case '#/About':
this.routerName = 'About'
break
}
}
},
}
</script>
<style lang="less">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
1.什么是vue-router
vue-router是vue.js官方给出的路由解决方案。
它只能结合vue项目进行使用，能够轻松的管理SPA项目中组件的切换。
vue-router的官方文档地址: https://router.vuejs.org/zh/
2.使用Vue-Router步骤
① 安装vue-router包
npm i vue-router@3.5.2 -S
② 创建路由模块
router/index.js
// 导入资源配置
import Vue from 'vue' import Router from 'vue-router' // 安装Router插件 Vue.use(Router)
// 创建路由实例 const router = new Router() // 导出Router实例 export default router
③ 导入并挂载路由模块
main.js文件中，Vue实例，入参路由实例
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
// ES6 模块导入 如果提供的是一个目录地址，默认导入里面index名称文件
// import router from '@/router/index.js'
import router from '@/router/index.js'
new Vue({
render: h => h(App),
router
}).$mount('#app')
④ 声明路由链接和占位符
配置路由和地址的对应关系：
import Vue from 'vue' import Router from 'vue-router' // 把路由对应的组件和Hash映射起来 import Home from '@/components/Index.vue' import Movie from '@/components/Movie.vue' import About from '@/components/About.vue' Vue.use(Router)
// 配置路由列表 path不需要写#号 const routes = [ { path: '/home', component: Home }, { path: '/movie', component: Movie }, { path: '/about', component: About } ]
// 注册到路由实例中 const router = new Router({ routes }) export default router
更改原来的手写路由分配,App.vue：
改用 router-view占位符标签实现路由分配
<template>
<div id="app">
<a href="#/index">首页</a> |
<a href="#/movie">电影</a> |
<a href="#/about">关于</a>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style lang="less">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
可以使用router-link代替a标签，router-link本身还是使用a标签做的
使用Router-link替换a标签
<router-link to="/index">首页</router-link> |
<router-link to="/movie">电影</router-link> |
<router-link to="/about">关于</router-link>
2.1、懒加载路由
https://www.cnblogs.com/mindzone/p/13909668.html
3、路由重定向问题
新的问题是，进入页面后没有默认页，需要用户自己手动点击，才会跳转
所以需要把首页在进入页面时就路由进来，这个功能可以使用路由重定向来解决：
// 配置路由列表 path不需要写#号
const routes = [
{ path: '/', redirect: '/home' },
{ path: '/home', component: Home },
{ path: '/movie', component: Movie },
{ path: '/about', component: About }
]
4、子路由和子路由占位符
路由配置：
import Vue from 'vue'
import Router from 'vue-router'
// 把路由对应的组件和Hash映射起来
import Home from '@/components/Index.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'
// 引入子组件
import SubPage1 from '@/components/about/SubPage1.vue'
import SubPage2 from '@/components/about/SubPage2.vue'
// 安装Router插件
Vue.use(Router)
// 设定路由的配置项
const routes = [
{ path: '/', redirect: '/index'},
{ path: '/index', component: Home },
{
path: '/about',
component: About,
children: [
// 子组件不能写斜杠开头, router会默认视为第一层级的规则来分配
{ path: 'tab1', component: SubPage1 },
{ path: 'tab2', component: SubPage2 }
]
}
]
const router = new Router({
routes
})
export default router
在About组件中编写对应的占位符：
<template>
<div>
<h3>关于 组件</h3>
<p>
<router-link to="/about/tab1" >子页面1</router-link>
<router-link to="/about/tab2" >子页面2</router-link>
</p>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'About'
}
</script>
5、默认子路由或者重定向
import Vue from 'vue'
import Router from 'vue-router'
// 把路由对应的组件和Hash映射起来
import Home from '@/components/Index.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'
// 引入子组件
import SubPage1 from '@/components/about/SubPage1.vue'
import SubPage2 from '@/components/about/SubPage2.vue'
// 安装Router插件
Vue.use(Router)
// 设定路由的配置项
const routes = [
{ path: '/', redirect: '/index'},
{ path: '/index', component: Home },
{
path: '/about',
component: About,
// 方式一：使用重定向配置
redirect: '/about/tab1',
children: [
// 方式二：使用默认子路由，省略路径实现
// { path: '', component: SubPage1 },
{ path: 'tab1', component: SubPage1 },
{ path: 'tab2', component: SubPage2 }
]
}
]
const router = new Router({
routes
})
export default router
6、动态路由实现
类似Rest风格，根据参数动态渲染页面的内容，提高页面的复用性
<template>
<div id="app">
<router-link to="/movie/1">电影1</router-link> |
<router-link to="/movie/2">电影2</router-link> |
<router-link to="/movie/3>电影3</router-link>
<hr>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style lang="less">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
路由配置时，声明一个动态路径参数标记：
在vue-router中使用英文的冒号(:) 来定义路由的参数项。
import Vue from 'vue'
import Router from 'vue-router'
// 把路由对应的组件和Hash映射起来
import Movie from '@/components/Movie.vue'
// 安装Router插件
Vue.use(Router)
// 设定路由的配置项
const routes = [
/**
* 动态参数配置
*
* props: true 开启props属性传参
*/
{ path: '/movie/:id', component: Movie },
]
const router = new Router({
routes
})
export default router
组件会把路由的路径参数封装成对象获取，通过下面这段代码获取
this.$route.params.id
可以开启Props属性来接收参数
<template>
<div>
<!-- this.$route.params 可以获取路由的参数 -->
<h3>电影 组件 </h3>
<p> 路由Rest参数 {{ $route.params.id }} -> {{ id }}</p>
</div>
</template>
<script>
export default {
name: 'Movie',
props: {
id: {
type: String,
default: ''
}
}
}
</script>
7、路径参数和查询参数
<template>
<div>
<h3>电影 组件 </h3>
<p> 路由Rest参数 {{ $route.params.id }} -> {{ id }}</p>
<p> 路由Query查询参数 {{ $route.query }}</p>
</div>
</template>
<script>
export default {
name: 'Movie',
props: {
id: {
type: String,
default: ''
}
}
}
</script>
在使用路由时，附加查询参数：
<template>
<div id="app">
<router-link to="/movie/1">电影1</router-link> |
<router-link to="/movie/2">电影2</router-link> |
<router-link to="/movie/3?aaa=100&bbb=true">电影3</router-link>
<hr>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style lang="less">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
8、编码式路由的跳转
<template>
<div>
<!-- this.$route.params 可以获取路由的参数 -->
<h3>电影 组件 </h3>
<p> 路由Rest参数 {{ $route.params.id }} -> {{ id }}</p>
<p> 路由Query查询参数 {{ $route.query }}</p>
<!--
声明式导航，向上面这种直接写标签和路径的实现组件跳转被称为声明式导航
普通网页中点击<a>链接、vue项目中点击<router-link>都属于声明式导航
编程式导航, 利用浏览器API实现导航的方式
普通网页中调用location.href跳转到新页面的方式，属于编程式导航
5.1 vue-router中的编程式导航API
vue-router提供了许多编程式导航的API,其中最常用的导航API分别是:
①this.$router.push('hash 地址') 跳转指定Hash地址，并增加一条历史记录
②this.$router.replace('hash 地址') 跳转指定Hash地址，并替换当前的历史记录
③this.$router.go(数值 n)，
在历史记录中进行前进和后退
0 表示当前页
-1 后退一页
如果后退的页数超过了历史记录的上限，则原地不动
1 前进一页
在实际开发中，一般只会前进和后退一层页面。因此vue-router提供了如下两个便捷方法:
①$router.back()
②$router .forward()
导航守卫：
控制路由能否跳转
全局前置首位
-->
<button @click="toMovie1"> 跳转到 电影1</button> <br>
<button @click="toAbout"> 跳转到 关于</button>
</div>
</template>
<script>
export default {
name: 'Movie',
props: {
id: {
type: String,
default: ''
}
},
methods: {
toMovie1 () {
// 直接在 <router-view> 标签中跳转
this.$router.push('/movie/1')
},
toAbout () {
this.$router.push('/about')
}
},
}
</script>
9、路由跳转守卫：
import Vue from 'vue'
import Router from 'vue-router'
// 把路由对应的组件和Hash映射起来
import Home from '@/components/Index.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'
// 引入子组件
import SubPage1 from '@/components/about/SubPage1.vue'
import SubPage2 from '@/components/about/SubPage2.vue'
// 安装Router插件
Vue.use(Router)
// 设定路由的配置项
const routes = [
{ path: '/', redirect: '/index'},
{ path: '/index', component: Home },
{ path: '/movie/:id', component: Movie, props: true },
{
path: '/about',
component: About,
redirect: '/about/tab1',
children: [
{ path: 'tab1', component: SubPage1 },
{ path: 'tab2', component: SubPage2 }
]
}
]
const router = new Router({
routes
})
/**
* 全局前置守卫
* //调用路由实例对象的beforeEach 方法，即可声明“全局前置守卫”
* //每次发生路由导航跳转的时候，都会自动触发fn这个“回调函数"
*/
router.beforeEach(function(to, from, next) {
// to是将要访问的路由的信息对象
// from是将要离开的路由的信息对象
// next 是一个函数，调用next() 表示放行，允许这次路由导航
// console.log(`to -> ${JSON.stringify(to)}`)
// console.log(`from -> ${JSON.stringify(from)}`)
/**
* 当前用户拥有后台主页的访问权限，直接放行: next()
* 当前用户没有后台主页的访问权限，强制其跳转到登录页面: next('/login')
* 当前用户没有后台主页的访问权限，不允许跳转到后台主页: next(false)
*/
next()
})
export default router
9.1、局部组件路由配置：
https://www.cnblogs.com/mindzone/p/13910845.html
浙公网安备 33010602011771号