第六讲 路由的简单介绍

目录

路由  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) <router-link> 相关属性

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

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">Home</a>

<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>

<!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link>

<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

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

<router-link :to="{ path: '/abc'}" replace></router-link>

 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
}

<router-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)'>返回1</button>
		<button @click='$router.forward()'>前进</button>
		<button @click='$router.go(1)'>前进1</button>
		<!-- 指定跳转关于页面 -->
		<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'