Vue框架中的路由

1. 环境搭建——脚手架

npm init vue@latest => 选择添pinia和router => 进入项目文件夹 => npm i => npm run dev

2. 注册路由

router/index.js中的routes下写路由，例如：其中views文件夹中放路由对应页面的文件

    {
      // 路由名
      path: "/playLists",
      // 懒加载组件
      component: () => import("../views/playLists/index.vue"),
    },

3. 页面跳转

3.1 声明式导航跳转标签

使用：<router-link to="/car">购物车</router-link>

与a标签区别：a标签会重新请求网络（浏览器功能）；router-link标签只是跳转，不会发起网络请求（底层是a标签，但阻止了a标签的默认事件），使用a标签名来设置css样式

当需要访问其他网站时，用a标签；如果访问的还是当前服务器上的页面，就用router-link标签

3.2 编程式导航跳转

主页面引入：import { useRouter } from 'vue-router'  使用：router.push('/路由');

跳转页面引入：import { useRoute } from 'vue-router'

3.3 跳转页面时传参

a. query传参 => router.push({ name: 路由名/ path:路由名 , query: { 传的参数 } })                                                  或 通过？拼接来传参 router.push('/路由名?key=value');  //

                     目标页获取 => useRoute().query.参数的属性名

b. 动态路由传参 => router.push({ name: 'login', params: { 传的参数 } });

        注：注册路由：path:'/网址:变量名' 必须注册路由的name 

               目标页面获取参数 => useRoute().params.参数的属性名

注：vue框架中，两种传参方式都可以在网址中看见

4. 路由嵌套——子路由

实现切换效果（CSS、v-if/v-for、动态组件component、子路由）

写在父路由里面，作为children属性的值，例如：

{
  path: "/shopdetail",
  // 路由名
  name: "shopdetail",
  component: () => import("../views/shopdetail/index.vue"),
  children: [
    {
       path: "/shopdetail/shop1",
       name: "shop1",
       component: () => import("../views/shopdetail/views/shop1.vue"),
    },
    {
       path: "/shopdetail/shop2",
       name: "shop2",
       component: () => import("../views/shopdetail/views/shop2.vue"),
    },
  ],
},

5. 重定向——redirect

当用户输入某个路由时，重新更改路由地址.。例如：

// 重定向 用户输入/shopdetail时，将路由改成/shopdetail/shop1
redirect: "/shopdetail/shop1",

6. 路由守卫（健全）

6.1 前置路由守卫

router.beforeEach((to,from,next)=>{ })

        to：要去哪个页面

        from：从哪个页面来

        next：让不让去

6.2 后置路由守卫——已匹配到路由

router.afterEach((to, from) => { })

函数内部可以操作浏览器的API，例如：上一个组件已将浏览器滚动条滑到下面，切换组件后应该将浏览器body标签滚动条滚到最上方。

6.3 独享守卫

beforeEnter: (to, from, next) => { }

只守卫一个网址 beforeEnter，写在路由内部，用法和beforeEach一样