目录
路由：
?
?
通过锚链接Hash实现简易前端路由的方法：
?
?示例代码：
<template>
<div>
<ul>
<li><a href="#/home">Home</a></li>
<li><a href="#/img">Img</a></li>
<li><a href="#/about">About</a></li>
</ul>
<component :is="certainTab"></component>
</div>
</template>
<script>
import Home from "./components/路由/利用components实现页面切换/Home.vue"
import Img from "./components/路由/利用components实现页面切换/Img.vue"
import About from "./components/路由/利用components实现页面切换/About.vue"
export default {
components: {
myHome: Home,
myImg: Img,
myAbout: About,
},
data(){
return{
certainTab:'myHome'
}
},
created() {
window.onhashchange=()=>{
switch (location.hash){
case '#/home':{
this.certainTab='myHome'
break
}
case '#/img':{
this.certainTab='myImg'
break
}
case '#/about':{
this.certainTab='myAbout'
break
}
}
}
}
}
</script>?vue-router:?
?
?vue-router的安装：
?
?
完成上面的步骤后会出现错误提示：
由于vue-router是一个外部组件包，所以需要在配置后才可以使用。
?配置和使用vue路由：
?
?示例代码：
//router.js
import {createRouter,createWebHashHistory} from 'vue-router'
import Home from './Home.vue'
import Img from './Img.vue'
import About from './About.vue'
const router= createRouter({
history:createWebHashHistory(),
routes:[
{path:'/home',component:Home},
{path:'/img',component:Img},
{path:'/about',component:About},
]
})
export default router//main.js
import router from './components/路由/vue-router的基础实现/router'
//挂载路由模块
app.use(router)//app.vue
<template>
<div>
<ul>
<li><router-link to="/home">Home</router-link></li>
<li><router-link to="/img">Img</router-link></li>
<li><router-link to="/about">About</router-link></li>
</ul>
<router-view></router-view>
</div>
</template>?vue-router高级用法：
路由重定向：
?路由高亮：
?
?示例代码：
.router-link-active{
color: red;
background-color: #cccccc;
}自定义高亮class类名：
?嵌套路由：
?实现嵌套路由：
?
?注意：子路由路径无需‘/’
嵌套路由的重定向：
原理与普通路由重定向一样。
示例代码：
//子路由的创建
{
path: '/about',
component: About,
redirect:'/about/Tab1',
children: [
{path: 'Tab1', component: Tab1},
]
},动态路由匹配：
?
?获取动态路由参数值：?
?编程式导航：
?
?
?
?命名路由：
?示例代码：
<router-link :to="{name:'movie',params:{id:1}}">跳转到电影1</router-link>
<router-link :to="{name:'movie',params:{id:2}}">跳转到电影2</router-link>
<router-link :to="{name:'movie',params:{id:3}}">跳转到电影3</router-link>
<router-view></router-view>?
?示例代码：
jumpUrl(getMovieId){
// this.$router.push(`/movie/${getMovieId}`)
this.$router.push({name:'movie',params: {id:getMovieId}})
}同样也是传递一个对象。命名路由多用于路径繁琐、过长的情景下。
导航守卫：
?示例代码：
//声明全局导航守卫
router.beforeEach(()=>{
console.log('已启用导航守卫')
})守卫方法的3个参数：
?示例代码：
router.beforeEach(
(to,
from,
next) => {
console.log(`to:${to}`)
console.log(`from:${from}`)
console.log(`next:${next}`)
console.log('已启用导航守卫')
})next函数的使用和3种调用方式：
?
?结合token控制访问权限：
?
