vue-router的使用
vue-router是vue基础工具的重要组成部分。
通过简单的配置路由组件映射关系，可以实现vue页面轻松跳转。
什么是前端路由
它是URL地址与组件之间的对应关系，通常使用Hash地址与组件之间对应。
浏览器的Hash地址就是URL地址中对应的锚链接地址, 如：
location.href: 完整的URL地址。
location.hash: URL地址中，#后面的部分，包括#。
锚点链接点击跳转
点击链接box3, 那么页面就滚动到box3对应的部分。
<body>
<div class="nav-bar">
<a href="#box1">box1</a>
<a href="#box2">box2</a>
<a href="#box3">box3</a>
<a href="#box4">box4</a>
</div>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
</body>
前端路由的工作方式
1.点击路由链接a标签
2浏览器URL地址中的hash值发送变化
3.前端路由监听到URL地址中的hash发生变化
4.前端路由拿到hash值对应的组件component, 然后渲染到浏览器对应的位置。
URL的hash地址与组件components的对应关系。
vue-router的实现原理
1.点击链接，切换url的hash地址
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<a href="#/home">主页</a>
<a href="#/center">个人中心</a>
<a href="#/about">关于</a>
<component :is="comName"></component>
</div>
</template>
2.监听window.onhashchange浏览器hash地址变化，hash地址变化时，动态修改组件类型
<script>
import Home from '@/components/Home/Home.vue'
import Center from './components/Center/Center.vue'
import About from './components/About/About.vue'
export default {
name: 'RouterDemoApp',
components: {
Home,
About,
Center
},
created () {
window.onhashchange = () => {
switch (location.hash) {
case '#/home':
this.comName = 'Home'
break
case '#/center':
this.comName = 'Center'
break
case '#/about':
this.comName = 'About'
break
}
}
},
data () {
return {
comName: 'Home'
}
},
}
</script>
vue-router的基本使用
1.在src目录下，创建router目录，然后创建index.js文件，在文件中添加路由配置如下
import Vue from 'vue'
import Router from 'vue-router'
import About from '@/components/About/About.vue'
import Center from '@/components/Center/Center.vue'
import Home from '@/components/Home/Home.vue'
// 将Router安装为Vue的插件
//Vue全局引入插件vue-router
//Vue在调用vue-router的install方法时，会引入2个全局组件router-link, router-view
//router-link: 和<a>的作用一样，用于href调整链接
//router-view: 代表要跳转的页面的展示位置
Vue.use(Router)
// 创建路由的实例对象
//实例属性.$route和$.router的区别
//$router: 拥有路由的所有方法， $route: 拥有路由的所有属性
const router = new Router({
mode: 'hash', //默认采用hash模式
routes: [
{ path: '/home', component: Home },
{ path: '/about', component: About },
{ path: '/center', component: Center }
]
})
export default router
2.在App.vue中，添加路由跳转入口和组件出口
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<!-- <a href="#/home">主页</a>
<a href="#/center">个人中心</a>
<a href="#/about">关于</a> -->
<!-- 在vue-router中，使用router-link代替a标签，并且里面的to属性表示要跳转的路由地址 -->
<router-link to="/home">主页</router-link>
<router-link to="/center">个人中心</router-link>
<router-link to="/about">关于</router-link>
<!-- <component :is="comName"></component> -->
<!-- 使用vue-router默认就存在这个占位组件，这个是路由视图的出口 -->
<router-view></router-view>
</div>
</template>
3.在main.js中，添加路由实例挂载
import Vue from 'vue'
import App from './App.vue'
import routerObj from '@/router/index'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
// 路由实例挂载
router: routerObj
}).$mount('#app')
vue-router嵌套路由
如果当前组件下有根据路由展示的子组件，可以在当前路由匹配规则中添加children项，然后在对应数组中添加子路由的路由规则配置。
如果要展示一个默认子路由，可以将这个子路由配置的path设置为""空字符串。
import Vue from 'vue'
import Router from 'vue-router'
import About from '@/components/About/About.vue'
import Center from '@/components/Center/Center.vue'
import Home from '@/components/Home/Home.vue'
import Tab1 from '@/components/Tabs/Tab1.vue'
import Tab2 from '@/components/Tabs/Tab2.vue'
// 将Router安装为Vue的插件
Vue.use(Router)
// 创建路由的实例对象
const router = new Router({
routes: [
// 地址重定向，当跳转的URL地址没有对应组件时，那么就会强制跳转到另一个地址
// 重定向：确定原来地址url是啥，看着不爽，要重定向到哪个url
{ path: '/', redirect: '/home' },
// 路由匹配规则，实例对应是根据匹配规则，从上到下逐条匹配的
{ path: '/home', component: Home },
// 嵌套路由，就是在对应路由容器配置项上增加children属性， 然后在这个子路由配置上增加嵌套子路由的配置。
// 嵌套子路由的path配置无需是/开头，默认router会自动添加
{
path: '/about',
component: About,
// 默认子路由方法1：设置父路由的重定向地址
// redirect: '/about/tab1',
children: [
// { path: 'tab1', component: Tab1 },
// 默认子路由方法2：在父路由的children中，设置默认路由的path:'', 这样表示父路由默认展示这个子路由
{ path: '', component: Tab1 },
{ path: 'tab2', component: Tab2 }
]
},
{ path: '/center', component: Center }
]
})
export default router
vue-router动态路由
当一类子路由会随业务不同而动态变化时，那么可以将这个路由的变化部分定义成参数
{ path: 'movie/:id', component: Movie }
添加 props: true选项时，组件内可以通过props参数接收动态路由的路由参数。
{ path: 'movie/:mid', component: Movie, props: true }
import Vue from 'vue'
import Router from 'vue-router'
import About from '@/components/About/About.vue'
import Center from '@/components/Center/Center.vue'
import Home from '@/components/Home/Home.vue'
import Tab1 from '@/components/Tabs/Tab1.vue'
import Tab2 from '@/components/Tabs/Tab2.vue'
import Movie from '@/components/Movie/Movie.vue'
// 将Router安装为Vue的插件
Vue.use(Router)
// 创建路由的实例对象
const router = new Router({
routes: [
// 地址重定向，当跳转的URL地址没有对应组件时，那么就会强制跳转到另一个地址
{ path: '/', redirect: '/home' },
// 路由匹配规则，实例对应是根据匹配规则，从上到下逐条匹配的
{ path: '/home', component: Home },
// 嵌套路由，就是在对应路由容器配置项上增加children属性， 然后在这个子路由配置上增加嵌套子路由的配置。
// 嵌套子路由的path配置无需是/开头，默认router会自动添加
{
path: '/about',
component: About,
// 默认子路由方法1：设置父路由的重定向地址
// redirect: '/about/tab1',
children: [
// { path: 'tab1', component: Tab1 },
// 默认子路由方法2：在父路由的children中，设置默认路由的path:'', 这样表示父路由默认展示这个子路由
{ path: '', component: Tab1 },
{ path: 'tab2', component: Tab2 }
]
},
{
path: '/center',
component: Center,
children: [
// id部分是可变路由的参数部分，它是随参数变化的。
// { path: 'movie/:mid', component: Movie }
{ path: 'movie/:mid', component: Movie, props: true }
]
}
]
})
export default router
使用时，根据业务不同动态变化路由
<template>
<div class="center-container">
Center组件
<hr>
<!-- 动态路由，将路由地址中随业务动态变化的部分声明成参数类型，如果：movie/:id, id是可变的参数 -->
<router-link to="/center/movie/1">三国演义</router-link>
<router-link to="/center/movie/2">红楼梦</router-link>
<router-link to="/center/movie/3">西游记</router-link>
<router-link to="/center/movie/4">水浒传</router-link>
<hr>
<router-view></router-view>
</div>
</template>
vue-router动态路由参数传递
路由/参数传递
vue代码如下:
<router-link to="/user/detail/1">用户1</router-link>
-----
routes代码如下:
{
// 路径里面传递参数是通过斜线传递的：比如/user/detail/1
path: 'detail/:id',
name: 'userDetail',
component: () => import('../view/UserDetail.vue')
}
----
这种参数在组件里面如何获取呢？
this.$route.params.id
路径？参数传递
<router-link to="/user/detail?id=1">用户1</router-link> 这种传递方式如何在组件里面获取参数呢？ this.$route.query.id
声明式导航与编程式导航
声明式导航：通过在html中写a标签，在vue中写<router-link>标签的方式，实现的跳转叫做声明式导航。
编程式导航：通过调用API的方式实现的跳转，如location.href的方式，叫做编程式导航。
<template>
<div class="home-container">
Home组件-编程式导航
<hr>
<button @click="handlePush">push:调用</button>
<button @click="handleReplace">replace:调用</button>
<button @click="handleGo">go:调用</button>
<!-- 行内使用编程式导航，要省略this,否则报错 -->
<button @click="$router.forward()">go便捷调用-forward前进一步</button>
<button @click="$router.back()">go便捷调用-back后退一步</button>
</div>
</template>
<script>
export default {
name: 'RouterDemoHome',
data () {
return {
}
},
mounted () {
},
methods: {
handlePush () {
// this.$router.push('hash地址')， 会产生历史记录
this.$router.push('/about/tab2')
},
handleReplace () {
// this.$router.replace('hash地址')，跳转到目标地址，并替代掉当前的历史记录
this.$router.replace('/center/movie/3')
},
handleGo () {
// this.$router.go(-1) go(正数)向前， go(负数)后退
this.$router.go(-1)
}
}
}
</script>
<style scoped>
.home-container {
height: 200px;
background-color: rgb(236, 13, 207);
width: 100%;
}
</style>
全局路由导航前置守卫
前置守卫的三种跳转方式
1.当前跳转满足跳转条件，则直接调用next()放行。
2.当前跳转不满足跳转条件，需要跳转到登录进行登录认证，则调用next('/login')进行跳转。
3.当前跳转不满足跳转条件，需要跳转到当前页面，刷新当前页，则调用next(false)进行刷新。
router.beforeEach：每次路由跳转之前会调用这个路由守卫回调方法。
可以在前置守卫中添加权限控制，比如只有localStore中保存了登录cookie，才进行方向，允许进入首页。
import Vue from 'vue'
import Router from 'vue-router'
import About from '@/components/About/About.vue'
import Center from '@/components/Center/Center.vue'
import Home from '@/components/Home/Home.vue'
import Tab1 from '@/components/Tabs/Tab1.vue'
import Tab2 from '@/components/Tabs/Tab2.vue'
import Movie from '@/components/Movie/Movie.vue'
import Main from '@/components/Main/Main.vue'
import Login from '@/components/Login/Login.vue'
// 将Router安装为Vue的插件
Vue.use(Router)
// 创建路由的实例对象
const router = new Router({
routes: [
// 地址重定向，当跳转的URL地址没有对应组件时，那么就会强制跳转到另一个地址
{ path: '/', redirect: '/home' },
// 路由匹配规则，实例对应是根据匹配规则，从上到下逐条匹配的
{ path: '/home', component: Home },
// 嵌套路由，就是在对应路由容器配置项上增加children属性， 然后在这个子路由配置上增加嵌套子路由的配置。
// 嵌套子路由的path配置无需是/开头，默认router会自动添加
{
path: '/about',
component: About,
// 默认子路由方法1：设置父路由的重定向地址
// redirect: '/about/tab1',
children: [
// { path: 'tab1', component: Tab1 },
// 默认子路由方法2：在父路由的children中，设置默认路由的path:'', 这样表示父路由默认展示这个子路由
{ path: '', component: Tab1 },
{ path: 'tab2', component: Tab2 }
]
},
{
path: '/center',
component: Center,
children: [
// id部分是可变路由的参数部分，它是随参数变化的。
{ path: 'movie/:mid', component: Movie, props: true }
]
},
{ path: '/login', component: Login },
{ path: '/main', component: Main }
]
})
// 全局路由守卫，当每次路由跳转时，会先调用这个回调函数，判断是否可以继续跳转
router.beforeEach((to, from, next) => {
/* must call `next` */
console.log(to)
if (to.path === '/main') {
const token = localStorage.getItem('login-token')
if (token) {
next()
} else {
next('/login')
}
} else {
// next：放行，如果运行路由跳转，则需要调用next()
next()
}
})
export default router
vue-router生命周期
1.全局beforeEach: 一般用来做权限控制。 2.路由中beforeEnter: 用的不多 3.组件里调用 beforeRouteEnter: 这个方法里面没有this 4.全局 router.resolve 5.全局 afterEach 6.调用组件的 beforeRouterLeave: 离开是提醒，是否提交表单，是否关注等等 7.beforeRouterUpdate 用在路由参数更新了，但是路由没有更新时使用。
浙公网安备 33010602011771号