对应关系
所有组件的展示与切换
都在这唯一的一个页面内完成,不同组件之间的切换
需要通过前端路由来实现。
<component :is="comName">component>
export default {
name: 'App',
data(){
return {
//要展示的组件名称
comName:'Home'
}
}
}
<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>
export default {
name:'App',
data() {
return{
//定义:在动态组件的位置,要展示的组件的名字,值必须是字符串
comName: 'Home'
}
},
//vue生命周期之create
created(){
//只要当前的App组件一被创建,就立即监听window对象的 onhashchange 事件
window.onhashchange = () => {
console.log('监听到了 hash 地址的变化', location.hash)
switch(location.hash){
case '#/home':
this.comName = 'Home'
break
case '#/movie':
this.comName = 'Movie'
break
case '#/about':
this.comName = 'About'
break
}
}
},
//组件使用第二步:2.注册组件
components:{
Home,
Movie,
About
}
}
</script>
【第一步】安装vue-router包
npm i vue-router@3.5.2 -S
【第二步】创建路由模块
//1.导入 Vue 和 VueRouter 的包
import Vue from 'vue'
import VueRouter from 'vue-router'
//2.调用 Vue.use() 函数,把VueRouter 安装为Vue的插件
Vue.use(VueRouter)
//3.创建路由的实例对象
const router = new VueRouter()
//4.向外共享路由的实例对象
export default router
【第三步】导入并挂载路由模块
import Vue from 'vue'
import App from './App.vue'
//导入路由模块,目的:拿到路由的实例对象
//在进行模块化导入的时候,如果给定的是文件夹,则可以写为:import router from '@/router',vue会默认导入这个文件夹中的index.js文件,如果没有会报错
import router from '@/router/index.js'
new Vue({
render: h => h(App),
//在vue项目中,要想把路由用起来,必须把路由实例对象,通过以下的方式进行挂载
// router: 路由的实例对象,原本写法: router:router(第二个router是导入的名称),如果两个名称一样,可以简写为:router
router
}).$mount('#app')
【第四步】声明路由链接和占位符
<template>
<div class="app-container">
<h1>App2 组件h1>
<a href="#/home">首页a>
<a href="#/movie">电影a>
<a href="#/about">关于a>
<hr/>
<router-view>router-view>
div>
template>
//1.导入 Vue 和 VueRouter 的包
import Vue from 'vue'
import VueRouter from 'vue-router'
//使用router-view的组件:第一步导入需要的组件
import Home from '@/components/Home.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'
//2.调用 Vue.use() 函数,把VueRouter 安装为Vue的插件
Vue.use(VueRouter)
//3.创建路由的实例对象
const router = new VueRouter(
{
// 使用router-view的组件:第二步配置对应关系如下:
// 在这里进行组件与router的hash地址映射关系配置
// router 是一个数组,作用:定义‘hash地址’ 与 '组件'之间的对应关系
routes:[
{path: '/home', component: Home},
{path: '/movie', component: Movie},
{path: '/about', component: About}
]
}
)
//4.向外共享路由的实例对象
export default router
【使用】当安装和配置了vue-router后,就可以使用router-link来替代普通的a链接了
<router-link to="/home">首页router-link>
<router-link to="/movie">电影router-link>
<router-link to="/about">关于router-link>
路由重定向
指的是:用户在访问地址A的时候,强制用户跳转
到地址C,从而展示特定的组件页面。
const router = new VueRouter({
//在 routes 数组中,声明路由的匹配规则
routes:[
//当用户访问 / 的时候,通过redirect 属性跳转到/home对应的路由规则
{path: '/',redirect: '/home'},
{path: '/home',component: Home},
{path: '/movie',component: Movie},
{path: '/about',component: About}
]
})
【使用子路由规则】
<template>
<div class="about-container">
<h3>About组件h3>
<router-link to="/about/tab1">tab1router-link>
<router-link to="/about/tab2">tab2router-link>
<hr/>
<router-view>router-view>
div>
template>
// 使用子路由规则:第一步:导入子组件
import Tab1 from '@/components/tabs/Tab1.vue'
import Tab2 from '@/components/tabs/Tab2.vue'
const router = new VueRouter(
{
// 使用router-view的组件:第二步配置对应关系如下:
// 在这里进行组件与router的hash地址映射关系配置
// router 是一个数组,作用:定义‘hash地址’ 与 '组件'之间的对应关系
routes:[
//路由规则
{path: '/', redirect: '/home'}, // 如果访问地址没有路径时,默认展示home组件
{path: '/home', component: Home},
{path: '/movie', component: Movie},
{ // about 页面的路由规则(父级路由规则)
path: '/about',
component: About,
children: [ // 1.通过children属性,嵌套声明子级路由规则
{ path: '',redirect: 'tab1'}, // 如果访问到about页面,没有点击时,默认展示tab1组件
{ path: 'tab1',component: Tab1}, // 2.访问 /about/tab1时,展示 Tab1 组件
{ path: 'tab2',component: Tab2} // 3.访问 /about/tab2时,展示 Tab2 组件
]
}
]
}
)
routes:[
//路由规则
{path: '/', redirect: '/home'}, // 如果访问地址没有路径时,默认展示home组件
{path: '/home', component: Home},
{path: '/movie', component: Movie},
{ // about 页面的路由规则(父级路由规则)
path: '/about',
component: About,
redirect: '/about/tab1', // 默认子路由
children: [ // 1.通过children属性,嵌套声明子级路由规则
{ path: 'tab1',component: Tab1}, // 2.访问 /about/tab1时,展示 Tab1 组件
{ path: 'tab2',component: Tab2} // 3.访问 /about/tab2时,展示 Tab2 组件
]
}
]
routes:[
//路由规则
{path: '/', redirect: '/home'}, // 如果访问地址没有路径时,默认展示home组件
{path: '/home', component: Home},
{path: '/movie', component: Movie},
{ // about 页面的路由规则(父级路由规则)
path: '/about',
component: About,
children: [ // 1.通过children属性,嵌套声明子级路由规则
{ path: '',redirect: 'tab1}, // 默认子路由
{ path: 'tab1',component: Tab1}, // 2.访问 /about/tab1时,展示 Tab1 组件
{ path: 'tab2',component: Tab2} // 3.访问 /about/tab2时,展示 Tab2 组件
]
}
]
【概念】把Hash地址中可变的部分
定义为参数项,从而提高路由规则的复用性。
【定义】在vue-router中使用英文的冒号(:)
来定义路由的参数项,示例代码如下:
//路由中的动态参数以 : 进行声明,冒号后面的是动态参数的名称
{ path: '/movie/:id',component: Movie}
【使用】案例如下:
{path: '/movie/:id', component: Movie},
<router-link to="/movie/1">战狼2router-link>
<router-link to="/movie/2">猎豹2router-link>
<router-link to="/movie/3">红海2router-link>
<h3>Movie组件 {{ this.$route.params.id }}h3>
【使用】
{path: '/movie/:id', component: Movie , props: true}
<script>
export default {
name: 'Movie',
//接受 props 数据
props: [ 'id' ]
}
</script>
<h3>Movie组件 {{ $route.params.id }}----{{id}}h3>
【params】路径参数
【query】查询参数
<router-link to="/movie/2?name=z1&age=2">猎豹2router-link>
【fullPath】完整请求地址
调用API方法
实现导航的方式,叫做编程式导航。【编程式API】vue-router提供了许多编程式导航的api,如下最常用的几种:
this.$router.push(‘hash地址’)
<button @click="gotoZhanLang">战狼2详情button>
<script>
export default {
name:'Hmoe',
//方法区
methods:{
gotoZhanLang(){
this.$router.push("/movie/2")
}
}
}
script>
this.$router.replace(‘hash地址’)
this.$router.replace("/movie/2")
this.$router.go(数值n)
this.$router.go(1)
<button @click="$router.back()">每次后退1步button>
<button @click="$router.forward()">每次前进1步button>
//创建路由实例对象
const router = new VueRouter({ ··· })
//调用路由实例对象的 beforeEach 方法,即可声明 “全局前置守卫”
//每次发生路由导航跳转的时候,都会自动触发 fn 这个回调函数
router.beforeEach(fn)
【守卫方法的参数】
router.beforeEach((to,from,next)=>{
//to 是将要访问的路由信息对象
//from 是将要离开的路由的信息对象
// next 是一个函数,调用next()表示放行,允许这次路由导航
})
【访问权限控制】模拟跳转登录页面访问权限校验
router.beforeEach((to,from,next)=>{
if(to.path === '/main'){
const token = localStorage.getItem('taken')
if(token){
next()// 有token值,可以访问后台主页
}else{
next('/login') //没有token值,跳转登录页面
}
}else{
next() // 不访问后台主页,直接放行
}
})