vue3+ts安装使用router

1.安装router

npm install vue-router --save

安装成功：

 2.创建router文件

3.配置路由router

import { 
    createRouter,
    createMemoryHistory,
    RouteRecordRaw
} from 'vue-router'

import Home from '../views/index.vue'

const routes:Array<RouteRecordRaw> = [
    {
        path:'/',
        name:'Home',
        component: Home
    },
    {
        path:'/cart',
        name:'cart',
        component:() => import('../views/cart.vue')
    },
    {
        path: '/goods',
        // redirect: '/goods/goodsList',
        name: 'goods',
        meta: { title: '商品管理', icon: 'el-icon-s-shop' },
        // component: () => import('../views/goods/goodsList.vue')
        children:[
          {
            path: 'goodsList',
            name: 'goodsList',
            component: () => import('@/views/goods/goodsList.vue'),
            meta: { title: '商品列表', path:'/goods/goodsList' }
          },
        ]
      }
]

const router = createRouter({
    history: createMemoryHistory(),
    routes
})
export default router

4.main.ts中引入router

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index'

createApp(App).use(router).mount('#app')

5.使用router跳转

A.声明式路由跳转：

<router-link to="/">Home</router-link>
<router-link to="/login">Login</router-link>

B.编程式导航：

const router=useRouter()
 
const 方法名（）=>{
    router.path({
        name:'name名'
    })
    //或
    router.path({
        path:'path名'
    })
    //query传参
    router.push({
        path: '/info',
        query: item
    })
}

接收参数

<template>
    <div>
        <div>ID：{
   
   {route.query?.id}}</div>
        <div>名称：{
   
   {route.query?.name}}</div>
        <div>价格：{
   
   {route.query?.price}}</div>
    </div>
</template>
 
<script setup lang='ts'>
import { useRoute } from 'vue-router';
const route = useRoute()
console.log(route.query,‘接收的参数’);
</script>
 

params传参

import { useRouter } from 'vue-router';

const router = useRouter()
const toDetail = (item) => {
    router.push({
        name: 'Info',
        params: { name: 'eduardo' }
    })
}

接收params穿的参数

<template>
    <div>
        <div>名称：{
   
   {route.params?.name}}</div>
    </div>
</template>
 
<script setup lang='ts'>
import { useRoute } from 'vue-router';

const route = useRoute()
 
</script>