vue3 vue-router

Vue 路由允许我们通过不同的 URL 访问不同的内容。通过 Vue 可以实现多视图的单页Web应用

一、入门（安装及配置）

1. 安装vue-router

npm i vue-router --save

2. 配置vue-router

新建 router 文件夹

路径：/src/router

新建 index.js 文件

路径：/src/router/index.js

index.js

import {createRouter,createWebHistory } from 'vue-router'
 
const routes = [
    {
        path:'/',
        component:() => import('../pags/login.vue')
    }
]
 
const router = createRouter({
    history:createWebHistory(),
    routes  //路由信息
})
export default router

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
 
createApp(App).use(router).mount('#app')

App.js

<template>
  <router-view/>
</template>
 
<script>
export default {
}
</script>
 
<style>
</style>

小满Router（第一章入门）_小满zs的博客-CSDN博客

第二章 命名路由-编程式导航(跳转)

除了 path 之外，你还可以为任何路由提供 name。这有以下优点：

• 没有硬编码的 URL
• params 的自动编码/解码。
• 防止你在 url 中出现打字错误。
• 绕过路径排序（如显示一个）

const routes:Array<RouteRecordRaw> = [
    {
        path:"/",
        name:"Login",
        component:()=> import('../components/login.vue')
    },
    {
        path:"/reg",
        name:"Reg",
        component:()=> import('../components/reg.vue')
    }
]

router-link跳转方式需要改变 变为对象并且有对应name

    <h1>小满最骚</h1>
    <div>
      <router-link :to="{name:'Login'}">Login</router-link>
      <router-link style="margin-left:10px" :to="{name:'Reg'}">Reg</router-link>
    </div>
    <hr />

编程式导航

除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

1.字符串模式

import { useRouter } from 'vue-router'
const router = useRouter()
 
const toPage = () => {
  router.push('/reg')
}

2.对象模式

import { useRouter } from 'vue-router'
const router = useRouter()
 
const toPage = () => {
  router.push({
    path: '/reg'
  })
}

3.命名式路由模式

import { useRouter } from 'vue-router'
const router = useRouter()
 
const toPage = () => {
  router.push({
    name: 'Reg'
  })
}

a标签跳转

直接通过a href也可以跳转但是会刷新页面

 <a href="/reg">rrr</a>

参考：小满Router（第二章-命名路由-编程式导航）_小满zs的博客-CSDN博客

 第三章 历史记录

replace的使用 

采用replace进行页面的跳转会同样也会创建渲染新的Vue组件，但是在history中其不会重复保存记录，而是替换原有的vue组件；

该方法的原理是： 替代

router.replace 跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

router-link 使用方法

   <router-link replace to="/">Login</router-link>
   <router-link replace style="margin-left:10px" to="/reg">Reg</router-link>

编程式导航

  <button @click="toPage('/')">Login</button>
  <button @click="toPage('/reg')">Reg</button>

import { useRouter } from 'vue-router'
const router = useRouter()
 
const toPage = (url: string) => {
  router.replace(url)
}

横跨历史

该方法采用一个整数作为参数，表示在历史堆栈中前进或后退多少步

 <button @click="next">前进</button>
 <button @click="prev">后退</button>

const next = () => {
  //前进 数量不限于1
  router.go(1);
}
 
const prev = () => {
  //后退
  //router.go(-1);
  router.back();
}

参考小满Router（第三章-历史记录）_小满zs的博客-CSDN博客_router 历史记录

第四章 路由传参

useRouter与useRoute的区别

useRouter是全局对象，用来传入参数。useRoute是当前对象，用来接收参数

useRouter介绍及使用

1. router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，包含了所有的路由包含了许多关键的对象和属性。例如history对象

• $router.push({path:’/path’}); 本质是向history栈中添加一个路由，在我们看来是 切换路由，但本质是在添加一个history记录
• $router.replace({path:’/path’}); 替换路由，没有历史记录
   

useRoute介绍及使用

2. route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等

• $route.path
• 字符串，等于当前路由对象的路径，会被解析为绝对路径，如 “/index/” 。
• $route.params
• 对象，包含路由中的动态片段和全匹配片段的键值对
• $route.query
• 对象，包含路由中查询参数的键值对。例如，对于 /index?id=1 ,会得到 $route.query.id == 1。

params传参合query传参的区别

1. params参数在地址栏中不会显示，query会显示

this.router.push({path:'/customList'，params:{id:6}})
this.router.push({path:'/customList'，query:{id:6}})

params: http://localhost:8080/#/customList
query:http://localhost:8080/#/customList?id=6

2.网页刷新后params参数会不存在

Params路由传参

编程式导航 使用router.push 或者 replace 的时候 改为对象形式并且只能使用name，path无效，然后传入params

使用useRouter传入参数（params）

语法：

router.push({ name:'listSecond', params:{ id, tips}})

<template>
    <div>
       <div class="list-style" 
       v-for="item in listItem" 
       :key="item.id"
       @click="handlerId(item?.id,item?.tips)" 
       >{{item.title}}</div>
    </div>
</template>
<script>
import {defineComponent, ref} from 'vue'
import {useRouter} from 'vue-router'
export default defineComponent({
    setup() {
        const listItem = ref([
            {
                title:'标题一',
                id:1,
                tips:'title-one'
            },
            {
                title:'标题二',
                id:2,
                tips:'title-second'
            }
        ])
        const router = useRouter();
        const handlerId =(id,tips) =>{
            //params的属性值只能为  对象
            router.push({name:'listSecond',params:{id,tips}})
        }
        return{listItem,handlerId}
    }
})
</script>

使用useRoute接收参数（params）

import { useRoute } from 'vue-router';
const route = useRoute()

<div>ID：{{ route.params?.id }}</div>

动态路由传参
很多时候，我们需要将给定匹配模式的路由映射到同一个组件。例如，我们可能有一个 User 组件，它应该对所有用户进行渲染，但用户 ID 不同。在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为 路径参数 。

路径参数 用冒号 : 表示。当一个路由被匹配时，它的 params 的值将在每个组件
因为用params路由传参，刷新界面会失去参数。配置动态路由之后就刷新后依然存在。

    {
        path:'/listFirst',
        name:'listFirst',
        component:()=>import('../pages/transmitInfo/list-first')
    },
    {
        path:'/listSecond/:id/:tips',//配置动态路由参数 :id、:tips
        name:'listSecond',
        component:()=>import('../pages/transmitInfo/list-second'),
    }

Query路由传参

编程式导航 使用router push 或者 replace 的时候 改为对象形式新增query 必须传入一个对象 

语法：

 router.push({ path:'/listSecond',query:{id,tips}})

使用useRouter传入参数（params） 

        const router = useRouter();
        const handlerId =(id,tips) =>{
            router.push({path:'/listSecond',query:{id,tips}})
        }

 使用useRoute接收参数（params）

import { useRoute } from 'vue-router';
const route = useRoute()

<div>ID：{{ route.query?.id }}</div>

import { useRoute } from 'vue-router';
import { data } from './list.json'
const route = useRoute()
 
 
const item = data.find(v => v.id === Number(route.params.id))

二者的区别

1. query 传参配置的是 path，而 params 传参配置的是name，在 params中配置 path 无效
2. query 在路由配置不需要设置动态路由参数，而 params 必须设置
3. query 传递的参数会显示在地址栏中
4. params传参刷新会无效(设置动态路由参数后有效)，但是 query 会保存传递过来的值，刷新不变 ;
5. 路由配置

第五章 嵌套路由

一些应用程序的 UI 由多层嵌套的组件组成。在这种情况下，URL 的片段通常对应于特定的嵌套组件结构，例如：导航栏右侧显示 另一页面(父子路由)

const routes: Array<RouteRecordRaw> = [
   {
        path:'/search', 
        component:search,
        redirect:'/search/htmlcontent',
        children:[
            {
                // 子路由的path里面的值不需要加 /
                path:'htmlcontent',
                component:()=>import('../components/serch/htmlcontent')
            },
            {
                path:'csscontent',
                component:()=>import('../components/serch/csscontent')
            }
        ]
    }
 
]

如你所见，children 配置只是另一个路由数组，就像 routes 本身一样。因此，你可以根据自己的需要，不断地嵌套视图。children里面的path属性值不要加 /

TIPS：不要忘记写router-view

router-view 当你的路由path 与访问的地址相符时，会将指定的组件替换该 router-view

    <div>
        <router-view></router-view>
        <div>
            //不要忘记 需要写上父路由
            <router-link to="/search">login</router-link>
            <router-link style="margin-left:10px;" to="/search/htmlcontent">htmlcontent</router-link>
        </div>
    </div>

方式二 使用 ruoter.push

<template>
    <div>
        <div class="search-style"> 
            <div class="nav-left">
                <div class="navitem-style" v-for="item in navlist" :key="item.id" @click="handerNav(item.path)">{{item.title}}</div>
            </div>
            <div class="nav-content">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>
<script>
import {defineComponent,ref} from 'vue'
import {useRouter} from 'vue-router'
export default defineComponent({
    setup(){
        const route = useRouter();
        const navlist = ref([
            {
                title:'HTML',
                id:1,
                path:'/htmlcontent'
            },
            {
                title:'CSS',
                id:2,
                path:'/csscontent'
            }
        ])
        const handerNav =(path)=>{
            route.push('/search'+path);
        }
        return{navlist,handerNav}
    }
})
</script>

参考   小满Router（第六章-命名视图）_小满zs的博客-CSDN博客

第六章 命名视图（同一级(组件)中展示更多的路由视图）

命名视图可以在同一级（同一个组件）中展示更多的路由视图，而不是嵌套显示。 命名视图可以让一个组件中具有多个路由渲染出口，这对于一些特定的布局组件非常有用。 命名视图的概念非常类似于“具名插槽”，并且视图的默认名称也是 default。

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置 (带上 s)

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 
 
const routes: Array<RouteRecordRaw> = [
    {
        path:'/listFirst',
        name:'listFirst',
        component:()=>import('../pages/transmitInfo/list-first'),
        children:[
            {
                path:'listFirstA',
                components:{
                    default:()=>import('../components/listFirstA')
                }
            },
            {
                path:'listFirstB',
                components:{
                    listFirstB1:()=>import('../components/listFirstB1'),
                    listFirstB2:()=>import('../components/listFirstB2')
                }
            }
        ]
    }
]
 
const router = createRouter({
    history: createWebHistory(),
    routes
})
 
export default router
 

对应Router-view 通过name 对应组件

<div>
     <div>
         <router-link to='/listFirst/listFirstA'>goodsCount</router-link>
         <router-link 
            style="margin-left:20px;"             
             to='/listFirst/listFirstB'>
          listFirstB</router-link>
         <hr>
         <div>
             <router-view></router-view>
             <router-view name='listFirstB1'></router-view>
             <router-view name='listFirstB12'></router-view>
         </div>              
     </div>
</div>

参考小满Router（第六章-命名视图）_小满zs的博客-CSDN博客

第七章  重定向&别名

重定向 redirect

1.字符串形式配置，访问/ 重定向到 /user （地址栏显示/,内容为/user路由的内容）

const routes: Array<RouteRecordRaw> = [
    {
        path:'/',
        component:()=> import('../components/root.vue'),
        redirect:'/user1',
        children:[
            {
                path:'/user1',
                components:{
                    default:()=> import('../components/A.vue')
                }
            },
            {
                path:'/user2',
                components:{
                    bbb:()=> import('../components/B.vue'),
                    ccc:()=> import('../components/C.vue')
                }
            }
        ]
    }
]

2.对象形式配置

const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        component: () => import('../components/root.vue'),
        redirect: { path: '/user1' },
        children: [
            {
                path: '/user1',
                components: {
                    default: () => import('../components/A.vue')
                }
            },
            {
                path: '/user2',
                components: {
                    bbb: () => import('../components/B.vue'),
                    ccc: () => import('../components/C.vue')
                }
            }
        ]
    }
]

3.函数模式（可以传参）

const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        component: () => import('../components/root.vue'),
        redirect: (to) => {
            return {
                path: '/user1',
                query: {
                    id:1
                }
            }
        },
        children: [
            {
                path: '/user1',
                components: {
                    default: () => import('../components/A.vue')
                }
            },
            {
                path: '/user2',
                components: {
                    bbb: () => import('../components/B.vue'),
                    ccc: () => import('../components/C.vue')
                }
            }
        ]
    }
]

别名 alias

将 path的属性值 '/ '别名为 '/root','/root2','/root3'，意味着当用户访问 /root ,  /root2  ,  /root3'时，URL是  /root 或 /root2 或 /root3 ，但会被匹配为用户正在访问 /

const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        component: () => import('../components/root.vue'),
        alias:["/root","/root2","/root3"],
        children: [
            {
                path: 'user1',
                components: {
                    default: () => import('../components/A.vue')
                }
            },
            {
                path: 'user2',
                components: {
                    bbb: () => import('../components/B.vue'),
                    ccc: () => import('../components/C.vue')
                }
            }
        ]
    }
]

参考 小满Router（第七章-重定向-别名）_小满zs的博客-CSDN博客