vue3+ts的Router使用教程

一、基本
1、安装router-----Vue3中要使用vue-router的最新版本，目前是4版本。
npm install router

2、新建router文件夹，在文件夹下新建index.ts

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


export const constantRoutes = [
//重定向--一般设置为首页
   {
       path:'/',
       redirect:'/about'
   }
   {
        path:'/hello',
        component:()=>import('@/components/TheWelcome.vue')
    }
]

const router = createRouter({
    history: createWebHistory(),
    routes: [...constantRoutes]
})

export default router;

3、在main.ts中引入router

import { createApp } from 'vue'
import App from './App.vue'
//引入router
import router from './router'

const app = createApp(App)

//安装router
app.use(router as any)

app.mount('#app')

4、路由组件中使用----- 路由组件通常存放在pages 或 views文件夹，一般组件通常存放在components文件夹。

  <template>
    <div class="app">
      <h2 class="title">Vue路由测试</h2>
      <!-- 导航区 -->
      <div class="navigate">
        <RouterLink to="/home" active-class="active">首页</RouterLink>
        <RouterLink to="/news" active-class="active">新闻</RouterLink>
        <RouterLink to="/about" active-class="active">关于</RouterLink>
      </div>
      <!-- 展示区 -->
      <div class="main-content">
        <RouterView></RouterView>
      </div>
    </div>
  </template>
  <script lang="ts" setup name="App">
    import {RouterLink,RouterView} from 'vue-router'  
  </script>

二、更多
1、路由跳转的两种工作模式

1、1‘history’模式
优点：URL更加美观，不带有#，更接近传统的网站URL。
缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有404错误。
1、2 ‘hash’模式
优点：兼容性更好，因为不需要服务器端处理路径。
缺点：URL带有#不太美观，且在SEO优化方面相对较差。

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


export const constantRoutes = [
    {
        path:'/hello',
        component:()=>import('@/components/TheWelcome.vue')
    }
]


const router = createRouter({
//‘history’模式
    history: createWebHistory(),
//‘hash’模式
    //history：createWebHashHistory(),
    routes: [...constantRoutes]
})


export default router;

2、to的两种写法
推荐使用第二种 方便我们传参
第一种：to的字符串写法

<router-link active-class="active" to="/home">主页</router-link>

第二种：to的对象写法

<router-link active-class="active" :to="{path:'/home'}">Home</router-link>

3、嵌套路由

1. 编写News的子路由：Detail.vue
2. 配置路由规则，使用children配置项：

    const router = createRouter({
    history:createWebHistory(),
    routes:[
      {
        name:'xinwen',
        path:'/news',
        component:News,
        children:[
          {
            name:'xiang',
            path:'detail',
            component:Detail
          }
        ]
      },
    ]
   })
   export default router

3、路由跳转

<router-link to="/news/detail">xxxx</router-link>
   <!-- 或 -->
<router-link :to="{path:'/news/detail'}">xxxx</router-link>

4、在组件中预留

<template>
     <div class="news">
       <nav class="news-list">
         <RouterLink v-for="news in newsList" :key="news.id" :to="{path:'/news/detail'}">
           {{news.name}}
         </RouterLink>
       </nav>
       <div class="news-detail">
         <RouterView/>
       </div>
     </div>
   </template>

5、路由传参
路由传参分为两种模式（params、query）

//query
<RouterLink
        :to="{
          //name:'xiang', //用name也可以跳转
          path:'/news/detail',
          query:{
            id:news.id,
            title:news.title,
            content:news.content
          }
        }"
      >
        {{news.title}}
      </RouterLink>

//接收参数
import {useRoute} from 'vue-router'
      const route = useRoute()
      // 打印query参数
      console.log(route.query)

//params
<RouterLink
        :to="{
          name:'xiang', //用name跳转
          params:{
            id:news.id,
            title:news.title,
            content:news.title
          }
        }"
      >
        {{news.title}}
      </RouterLink>

//接收参数
import {useRoute} from 'vue-router'
      const route = useRoute()
      // 打印params参数
      console.log(route.params)

//编程式导航
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})


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

备注1：传递params参数时，若使用to的对象写法，必须使用name配置项，不能用path。

备注2：传递params参数时，需要提前在规则中占位。

6、replace属性

1. 作用：控制路由跳转时操作浏览器历史记录的模式。

2. 浏览器的历史记录有两种写入方式：分别为push和replace：

   • push是追加历史记录（默认值）。
   • replace是替换当前记录。

3. 开启replace模式：

<RouterLink replace .......>News</RouterLink>