文章目录
什么是路由
路由就是对应关系,即地址与组件之间的对应关系,前端路由指的就是hash地址与组件之间的对应关系
前端路由的工作方式
- 用户点击了页面上的路由链接
- 导致了URL地址栏中的Hash值发生了变化
- 前端路由监听到了Hash地址的变化
- 前端路由把当前Hash地址对应的组件渲染到浏览器中
实现简易的前端路由
<template>
<div class="app-container">
<h1>App 根组件</h1>
<a href="#/home">首页</a>
<a href="#/movie">电影</a>
<a href="#/about">关于</a>
<hr />
<component :is="comName"></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',
data(){
return {
comName: "Home"
}
},
// 注册组件
components: {
Home,
Movie,
About
},
created () {
// 只要当前的app组件一被创建,就立即监听window对象的onhashchange事件
window,onhashchange = () =>{
console.log(location.hash)
switch(location.hash){
case "#/home":
this.comName='Home'
break
case "#/movie":
this.comName = 'Movie'
break
case "#/about":
this.comName = 'About'
break
}
}
}
}
</script>
vue-router的基本使用
什么是vue-router
vue-router是vue.js官方给出的路由解决方案,只能接和vue项目进行使用。能够轻松的管理SPA项目中的组件的切换
vue-router安装和配置的步骤
- 安装vue-router包
npm i vue-router@3.5.2 -S
- 创建路由模块:在src源代码目录下,新建router/index.js路由模块,并初始化代码
// 导入Vue和VueRouter的包
import Vue from 'vue'
import VueRouter from 'vue-router'
// 调用Vue.use()函数,把VueRouter安装为Vue的插件
Vue.use(VueRouter)
// 创建路由的实例对象
// routes是一个数组,定义了hash地址与组件之间的关系
const router = new VueRouter()
// 向外共享路由的实例对象
export default router
- 导入并挂载路由模块
// 导入路由模块,拿到路由实例对象
import router from '@/router/index.js'
new Vue({
render: h => h(App),
// router :路由的实例对象
router
}).$mount('#app')
在进行模块化导入的时候,如果给定的是文件夹,则默认导入这个文件夹下,名字叫做index.js的文件
- 声明路由链接和占位符
只要在项目中安装和配置了vue-router就可以使用router-view这个组件,充当占位符
在路由模块中声明路由的对应关系
routes是一个数组,定义了hash地址与组件之间的关系
const router = new VueRouter({
routes:[
{path:'/home',component:Home},
{path:'/movie',component:Movie},
{path:'/about',component:About}
]
})
当安装和配置了vue-router后,可以使用router-link来替代普通的a
<router-link to="/home">首页</router-link>
<router-link to="/movie">电影</router-link>
<router-link to="/about">关于</router-link>
redirect重定向
路由重定向指的是:用户在访问地址A的时候,强制用户跳转到地址C,从而展示特定的组件页面,通过路由规则的redirect属性,指定一个新的路由地址。
嵌套路由
通过路由实现组件的嵌套展示,叫做嵌套路由
通过children属性声明子路由规则
如果通过原来的方式声明路由规则,会发现嵌套无法形成,子路由中的链接会覆盖子级模块,为了解决这种状况,我们需要了解children属性
const router = new VueRouter({
routes:[
{path:'/',redirect:"/home" },
{path:'/home',component:Home},
{path:'/movie',component:Movie},
{
path:'/about',
component:About,
children:[
{path:'tab1',component:tab1},
{path:'tab2',component:tab2}
]
}
]
})
在未点击tab1和tab2的时候,默认是不显示的。如果想要跳转到指定的地址,我们可以利用路由重定向来设置默认显示子组件,也可以使用默认子路由。
默认子路由: 如果children数组中,某个路由规则的path值为空字符串,则这条路由为默认子路由
动态路由匹配
动态路由指的是把hash地址中可变的部分定义为参数项,从而提高路由规则的复用性,使用英文的冒号来定义路由的参数项。
//index.js中
{path:'/movie/:mid',component:Movie},
//如何取值---路由的参数对象
$route.params.mid
也可以使用props:true来开启路由传参,从而方便的拿到路由规则中动态参数的值
{path:'/movie/:mid',component:Movie,props:true},
注意:
- 在hash地址中,/后面的参数项叫做路径参数
- 在路由参数对象中,需要使用this.$route.params来访问路径参数
- 在hash地址中,?后面的参数项叫做查询参数
- 在this.$route中,path只是路径部分,fullPath是完整的