vue3 、 vueRouter基础使用

router基础

vuerouter安装引入

一、动态路由匹配

官方解释：

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

简单的来说就是可以通过路径传参数，如：usre/:id user/1/,user/2/，可以拿到用户 id:1或

实现步骤

1.路由定义

router/index.ts

import {createRouter,createWebHistory} from 'vue-router'


const router = createRouter({
    //路由方式
    history:createWebHistory(import.meta.env.BASE_URL),
    //路由列表
    routes:[
        {
            path:'/login',
            component:()=>import("@/views/loginPage.vue") 
        },
        {
            path:'/',
            component:() => import('@/views/LayoutPage.vue') ,
            children:[
                {
                    path:'/control/1/:id',
            //：变量名
                    component:()=> import('@/views/feature/controlPage.vue')
                },
                {
                    path:'/control/manage/:message',
     //：变量名
                    component:()=> import('@/views/feature/ManagePage.vue')
                },
            ]
        }
    ]
})
export default router

2.路由导航

LayouterPage.vue

<template>
    <div class="main-box">
        <header>控制台</header>
    <footer>
        <div class="left">
            // control/1/匹配前缀 2为参数可以根据需求更改
            <routerLink to="/control/1/2">控制台1</routerLink>
                // /control/manage匹配前缀 msg为参数可以根据需求更改
            <routerLink to="/control/manage/msg">管理</routerLink>
        </div>
        <div class="right">
            <router-view></router-view>
        </div>
    </footer>
    </div>

</template>

3.页面接受

通过$route.params接受路由从参数，index.ts中定义的什么参数就用什么接受

control Page.vue

<template>
    控制台1
    //通过$route.params.id接受
    <div class="user-id">{{ $route.params.id }}</div>
</template>

Manage.vue

<template>
    管理
    <div class="msg">{{ $route.params.message }}</div>
</template>

4.测试

成功接受

二、编程式导航

可以使用api操作导航

import { useRouter } from 'vue-router'; //引入useRouter
const router = useRouter() 
const onclick = ()=>{
    router.push('/order') 导航到/order
}

其他用法 参考官方文档

// 字符串路径
router.push('/users/eduardo')

// 带有路径的对象
router.push({ path: '/users/eduardo' })

// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })

// 带查询参数，结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// 带 hash，结果是 /about#team
router.push({ path: '/about', hash: '#team' })

路径参数为变量

const username = 'eduardo'
// 我们可以手动建立 url，但我们必须自己处理编码
router.push(`/user/${username}`) // -> /user/eduardo
// 同样
router.push({ path: `/user/${username}` }) // -> /user/eduardo
// 如果可能的话，使用 `name` 和 `params` 从自动 URL 编码中获益
router.push({ name: 'user', params: { username } }) // -> /user/eduardo
// `params` 不能与 `path` 一起使用
router.push({ path: '/user', params: { username } }) // -> /user

三、命名路由

在路由导航中我们可以用 路径 / 、/order去导航到我们的页面以外，也可以给路由命名通过name的值去导航

假设此时有一个路由配置

const routes = [
  {
    path: '/user/:username',
    name: 'user', //给这个路径取一个name为user
    component: User,
  },
]

我们在导航就可以使用

<router-link :to="{ name: 'user', params: { username: 'erina' }}">
  User
</router-link>
//params为路径参数

编程式导航

router.push({ name: 'user', params: { username: 'eduardo' } })
//此时路径为 /user/eduardo
//记得router.js中配置path:'/user/:username'

四、命名视图

简单的来说就是可以给router-view一个name属性 当在不同的路径下如 /order /manage 下整个router-view展示的内容可以不同

在官方的教程下,给了三个router-view

//这个是default默认 router view
<router-view class="view one"></router-view> 
//这个是配置 name = a 的router-view
  <router-view class="view two" name="a"></router-view>
//这个是配置 name = b 的router-view
  <router-view class="view three" name="b"></router-view>

router.js 路由配置文件

import { createRouter, createWebHistory } from 'vue-router'
import First from './views/First.vue'
import Second from './views/Second.vue'
import Third from './views/Third.vue'
export const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
		//当路由为/是 默认router-view显示内容为First name=a的router
        -view显示为Second name=b的router-view显示为Thrid
      components: {
        default: First,
        a: Second,
        b: Third,
      },
    },
    {
      path: '/other',
        //当路由为/other是 默认router-view显示内容为Third name=a的router
        -view显示为Second name=b的router-view显示为First
      components: {
        default: Third,
        a: Second,
        b: First,
      },
    },
  ],
})

运行结果

路由为：/

路由为：/other

五、重定向和别名

这个大概就是在某个router-view中 /主页面后想自动导航到第某个功能的页面

比如登录过后就导航到/ 这个路径，然后自动导航到第一个功能比如，数据统计页面，订单管理页面等

使用方式有3种

const routes = [{ path: '/', redirect: '/control' }]
// 当路径为 / 自动导航到 /control
const routes = [{ path: '/', redirect: { name: 'control' } }]
//也可以使用name命名路由
const routes = [
  {
    // /search/screens -> /search?q=screens
    path: '/search/:searchText',
    redirect: to => {
      // 方法接收目标路由作为参数
      // return 重定向的字符串路径/路径对象
      return { path: '/search', query: { q: to.params.searchText } }
    },
  },
  {
    path: '/search',
    // ...
  },
]

六、路由组件传参

这个就是比如你在某个组件想使用 路径中的/user/:id 你可以通过 $route.params.id旦是 这个就写死了当其他组件也想使用这个组件是id这个变量就不能用了所以官方推出了一个新的传参方式

old

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}
const routes = [{ path: '/user/:id', component: User }]

可以改写成这样

const User = {
  // 请确保添加一个与路由参数完全相同的 prop 名
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}
//当 props 设置为 true 时，route.params 将被设置为组件的 props。
const routes = [{ path: '/user/:id', component: User, props: true }]

其他引入方式

 {
                    path:'/order/:msg',
                    name:'order',
                    component:{
                        props:['id'],
                        template:()=>import('@/views/feature/orderPage.vue')
                    },
                    props:true
                }

对于有命名视图的路由，你必须为每个命名视图定义 props 配置：

const routes = [
  {
    path: '/user/:id',
    components: { default: User, sidebar: Sidebar },
    props: { default: true, sidebar: false }
  }
]