作用:vue+router用来实现单应用页面SPA(Single Page Application)页面跳转
单应用页面=》整个项目只有一个html页面,不适合做SEO搜索引擎(nuxt.js适合做SEO),后台管理系统项目适合
router官网:https://v3.router.vuejs.org/zh/api/
安装:
npm install vue-router
使用:在src下心间router/index.js文件
import Router from "vue-router";
import Vue from "vue";
import Home from "../views/home.vue";
Vue.use(Router);
const routes = new Router({
routes: [
{
path: "/",
name: "home",
component: Home,
},//一般首页直接引入
{
path: "/about",
name: "about",
component: () => import("../views/about.vue"),
},//懒加载按需加载提升性能
],
});
const router = new Router({
mode: "history",//”hash“两种模式
base: process.env.BASE_URL,
routes,
});
export default router;
面试题:路由的模式有几种,有什么区别
history"和”hash“两种
区别:
- 浏览器行为:当请求路径找不到时,history模式会发送一次get请求,hash模式不会额外发送请求;
- URL结构不同:hash模式请求是路径上会带“#”号,history模式比hash模式颜值更高更美观
- 服务器支持:hash模式不需要服务器特别配置,而 history 模式需要服务器配置以正确处理所有路由
- SEO:history模式支持服务器端渲染,有利于搜索引擎优化(SEO),而 hash 模式则不支持。
- 兼容性:hash模式兼容性更好,因为它不依赖于 HTML5 的 History API,老旧浏览器兼容。
路由懒加载分包和配置404页面
打包项目运行:npm run build 打包文件dist文件里的js文件显示是一串数字还是对应路由name,就要设置 webpackChunkName
import Router from "vue-router";
import Vue from "vue";
import Home from "../views/home.vue";
import Redirect from "../views/redirect404.vue";
Vue.use(Router);
const routes = new Router({
routes: [
{
path: "/",
name: "home",
component: Home,
},//一般首页直接引入
{
path: "/about",
name: "about",
component: () => import(/* webpackChunkName: "about" */ "../views/about.vue"),
},//懒加载按需加载提升性能
{
path: "*",
component: Redirect,
},//配置404页面
],
});
子路由和动态路由
import Router from "vue-router";
import Vue from "vue";
import Home from "../views/home.vue";
import Movie from "../views/movie.vue";
const routes = new Router({
routes: [
{
path: "/",
name: "home",
component: Home,
},//一般首页直接引入
{
path: "/about",
name: "about",
component: () => import(/* webpackChunkName: "about" */ "../views/about.vue"),
children: [
{
path: "child",
name: "child",
component: () => import(/* webpackChunkName: "about" */ "../views/child.vue"),
},//子路由
{
path: '/movie/:id',
component: Movie,
props: true
}//动态路由
],
}
],
});
展示页面
//template方式:
<router-link to="/about">跳转到about</router-link>
<router-link :to={name:"home",path:"/home"}>跳转到news</router-link>
/*带查询参数,下面的结果为 /register?plan=private*/
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
/*常用的属性
to:表示目标路由的链接
tag:有时候想要 <router-link> 渲染成某种标签,例如 <li>。 于是我们使用 tag prop 类指定何种标签,同样它还是会监听点击,触发导航。
replace:设置 replace 属性的话,当点击时,会调用 router.replace() 而不是 router.push(),于是导航后不会留下 history 记录。
active-class:默认值: "router-link-active",设置链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。
*/
//js方式
this.$router.push()//插入跳转路径A-》B,还可以B返回A
this.$outer.replace()//插入跳转路径A-》B,不能返回
this.$router.go(-1)//-1返回上一页,0表示当前页,1表示下一页
this.$router.back()//返回上一页
//vue3中 useRouter=>this.$router, useRoute=>this.$route
import { useRouter,useRoute } from 'vue-router'
let router = useRouter()
路由守卫
适用场景:进入某个页面,前置需要判断用户是否登陆,登陆状态可以进入页面,不是登陆状态不能进入该页面则进入登陆页面
全局导航守卫
router.beforeEach(前置)
router.beforeResolve(解析)
router.afterEach(后置)
router.beforeEach((to, from, next) => {
if (to.path === '/login') {
next()
} else {
const token = localStorage.getItem('token')
if (token) {
next()
} else {
next('/login')
}
}
})
路由独享的守卫
router.beforeEnter
{
path: "/about",
name: "about",
beforeEnter(to, from, next) {
console.log(to);///about
console.log(from);//home
if(token!==''){
next();//跳转到about页面
}else {
next('/login');//跳转到login页面
}
},
component: () =>
import(/* webpackChunkName: "about" */ "../views/about.vue"),
}
/**?
* to:要去那个路由对象
* from:当前路由对象
* next() /ok符合身份
* next('/login')跳转到对应组件
*/
})
组件内导航守卫
beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave