目录

路由  vue-router

一、下载

二、组件

二、路由的配置 ：/router/index

（1)、普通路由配置

（2)、普通路由传参

​ 三、404页面：404的path为*，配置在最后面

四、编程式路由跳转$router

五、路由信息$route

 六、路由守卫

七、路由元信息

八、路由查询参数

1、传递

2、获取

---

路由  vue-router

原理：地址发生 变化，刷新页面，检测地址栏变化切换div更新视图 hash路由

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。

一、下载

1、直接下载 / CDN

https://unpkg.com/vue-router/dist/vue-router.js

 2. NPM ：推荐使用淘宝镜像：

npm install vue-router

二、组件

(1) 相关属性

1、to:表示目标路由的链接。 当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。

<router-link to="home">Homerouter-link>
<a href="home">Homea>
 
<router-link v-bind:to="'home'">Homerouter-link>
 
<router-link :to="'home'">Homerouter-link>
 
<router-link :to="{ path: 'home' }">Homerouter-link>
 
<router-link :to="{ name: 'user', params: { userId: 123 }}">Userrouter-link>
 
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Registerrouter-link>

2、replace：设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，导航后不会留下 history 记录

 3、active-class：设置 链接激活时使用的 CSS 类名。

<style>
   ._active{
      background-color : red;
   }
style>
<p>
   <router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">首页router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">关于router-link>
p>

二、路由的配置 ：/router/index

（1)、普通路由配置

{
path:"/user",
name:"user",
component:()=>import(xxx)
}

（2)、普通路由传参

{
path:"/product/:id",
name:"product",
component:xxx
}
 
link to="/product/abc">
在页面中获取
$route.params.id

 三、404页面：404的path为*，配置在最后面

{
path：“*”
}

​​​​​

四、编程式路由跳转$router

• 前进   forward()    go(1)
• 后退   go(-1)    back()
• 切换路由    push("/about")
• 替换路由    replace("/about")

<template>
	<div>
		<h1>用户中心h1>
		<button @click='$router.back()'>返回button>
		<button @click='$router.go(-1)'>返回1button>
		<button @click='$router.forward()'>前进button>
		<button @click='$router.go(1)'>前进1button>
		
		<br>
		<button @click='$router.push("/about")'>关于button>
 
		
		<button @click='$router.replace("/about")'>关于-替换(不留历史记录)button>
		<br>
 
		<router-link :to="{'name':'about'}">关于router-link>
		<router-link :to="{path:'/product/def',query:{age:18},hash:'best'}">产品router-link>
		<router-link to='/product/def?age=18#best'>产品router-link>
	div>
template>
 

五、路由信息$route

• 路由参数    params
• 查询    query
• 地址    path
• 全地址    fullPath
• 名称    name
• 哈希值    hash

<template>
	<div>
		<h1>产品页面{{$route.params.id}}h1>
		<p>查询参数:{{$route.query}}p>
		<p>哈希值:{{$route.hash}}p>
		<p>全地址:{{$route.fullPath}}p>
		<p>地址:{{$route.path}}p>
		<p>名称:{{$route.name}}p>
		<button @click='$router.back()'>返回button>
	div>
template>
 
<script>
script>
 
<style>
style>

 六、路由守卫

（1）组件内部

• 进入前：beforeRouterEnter(to,from,next）
• 离开前： beforeRouteLeave
• 更新前：beforeRouterUpdate

解释（to,from,next）:

1.  to要进入的路由
2.  from从哪个页面进入
3.  next下一步(必须要执行)

• next(进入to页面
• next(true)进入to页面
• next(false)不跳转
• next("/login")跳转到登录

<script>
// 导航守卫:在进入,离开页面前,做一些事情
//离开页面前,让用户确认是否离开
import { getCartList } from "@/api/shop.js";
export default {
  data() {
    return {
      cartList: [],
    };
  },
 
  created() {
    getCartList().then((res) => {
      if (res.data.code === 200) {
        this.cartList = res.data.data;
        // console.log(this.cartList);
        console.log(res.data.data);
      }
    });
  },
 
  beforeRouteEnter(to, from, next) {
    if (localStorage.getItem("token")) {
      next();
    } else {
      alert("请先登录");
      // 跳转到登录页面,并携带一个查询参数 名称是redirecrt 值是/cart
      next("/login?redirect=/shop");
    }
  },
  beforeRouteLeave(to, from, next) {
    //to要去的页面
    //from从哪个页面离开
    // next下一步(必须要执行)
    var flag = window.confirm("亲，商品价格是本月最低价格，确定也放弃优惠吗?");
    if (flag) {
      next(); //进入下一页面
    } else {
      next(false); //不离开
    }
  },
};
script>

1、全局：

2、 独享：beforeEnter()

 {
       //这里不用加斜
       name:'home',
       path:'home',
       component:home,
       meta:{isAuth:true},
       // 独享路由守卫
       beforeEnter:(to,from,next)=>{
           if(to.meta.isAuth){
               if(localStorage.getItem('school')=== 'beijinhdaxue'){
                  next()
              }else{
                 alert("请登录")
              }
               
          }
       }
   },

作用：进入离开页面前做拦截,处理事情(跳转提示,权限检查)

七、路由元信息

{
path:path,name,component,
meta:{noFooter:true}
}
 
$route.meta.noFooter范围

八、路由查询参数

1、传递

next("/login?redirect=/cart")

2、获取

var redirect = this.$route.query.redirect| | '/user'