【Vue 路由】

Vue 路由：Vue Router

  Vue Router 是Vue.js (opens new window)官方的路由管理器。它和Vue.js 的核心深度集成，包含的功能有：
  • 嵌套的路由/视图表
  • 模块化的、基于组件的路由配置
  • 路由参数、查询、通配符
  • 基于Vue.js 过渡系统的视图过渡效果
  • 细粒度的导航控制

Vue Router安装

  可以在用脚手架创建项目时选择安装上了，如果刚开始没有，通过npm安装：
  npm install vue-router@4
  安装完后会有router目录：

使用流程：

1.开发页面（组件）
2.定义路由
3.组件使用路由

router/index.js注册一个路由

import { createRouter, createWebHashHistory } from "vue-router";
import HomeView from "../views/HomeView.vue";

const routes = [
  {
    path: "/",
    name: "home",
    component: HomeView,
  },
  {
    path: "/about",
    name: "about",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
  },
  {
    path: "/user", //设置资源路径
    name: "User", //路由名称
    component: () => import("../views/User"), //引用组件
  },
];
//创建路由实例并传递上面的路由对象
const router = createRouter({
  history: createWebHashHistory(), //路由模式（有两种）
  routes,
});

export default router;

通过<router-link to=“/User”></router-link> 标签使用路由

<router-link to="/User">User</router-link> 

Vue Router路由传参

  URL传参：一般用于页面跳转，将当前数据传递到新页面，例如详情页

params传参

• 配置路由：{path: ‘/user/:id’, component: about}
• 传递方式：
• 传递后路径：/user/6
• 接收参数：$route.params.id
示例：

<!--用户页面-->
<template>
    <table border="1px">
      <thead>
        <tr>
          <td>id</td>
          <td>用户名</td>
          <td>邮箱</td>
          <td>性别</td>
          <td>所在地</td>
        </tr>
      </thead>
      <tbody v-for="i in username" :key="i.id">
        <tr>

          <td>{{ i.id }}</td>
<!--          动态获取点击对应的id-->
          <router-link :to="/user_detail/+i.id"><td>{{ i.username }}</td></router-link>
          <td>{{ i.email }}</td>
          <td>{{ i.sex }}</td>
          <td>{{ i.city }}</td>
        </tr>
      </tbody>

    </table>
</template>

<script>
export default {
  name: "User",
  data(){
    return{
    username: ''
    }
  },methods: {
     getdata(){
       this.$test1.get("/test-table/user.json")
           .then(response => {this.username = response.data.data})
     }
  }, created() {
    this.getdata()
  }
}
</script>

<style scoped>

</style>

<!--路由-->
import userDetail from "@/components/userDetail"; \\导入子页面
  {
    path: "/user_detail/:id",
    name: "userDetail",
    component: userDetail,
  }, //注册跳转子页面

<!--子页面-->
<template>

<!--{{ $route.params.id }}用来获取传参的id-->
<h1>这里是用户ID为{{ $route.params.id }}的详情页</h1>
</template>

<script>
export default {
  name: "userDetail"
}
</script>

<style scoped>

</style>

query传参

• 配置路由：{path: ‘/user/’, component: about}
• 传递方式：<router-link to=”{path: ‘/about ‘, query:{id:6}}”>
• 传递后路径：/user?id=6
• 接收参数：$route.query.id

<!--路由设置-->
  {
    path: "/user_detail/",
    name: "userDetail",
    component: userDetail,
  },
<!--父页面设置-->
<router-link :to="/user_detail/+'?id='+i.id"><td>{{ i.id }}</td></router-link>

<!--子页面设置-->
  <h1>这里是用户ID为{{ $route.query.id }}的详情页</h1>  

Vue Router导航守卫

  vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。
简单来说，就是在路由跳转时候的一些钩子，当从一个页面跳转到另一个页面时，可以在跳转前、中、后做一些事情。

每个守卫方法接收参数：
 • to：即将要进入的目标，是一个路由对象
 • from：当前导航正要离开的路由，也是一个路由对象
 • next：可选，是一个方法

可以返回的值如下：
 • false：取消当前的导航。如果浏览器的URL 改变了(可能是用户手动或者浏览器后退按钮)，那么URL 地址会重置到from 路由对应的地址。
 • 一个路由地址：通过一个路由地址跳转到一个不同的地址。

  使用router.beforeEach 注册一个全局前置守卫，当一个导航触发时，就会异步执行这个回调函数。

router.beforeEach((to, from,next) =>{
  // console.log(to),
  // console.log(from)
  if (to.path == "/login"){
    next()
  }else {
    const token="1"
    if (token){
      next()
    }else {
      next("/login")
    }
  }

});