vue3.0配置vue-router

第一步：安装集成安装包

npm install vue-router --save

第二步：我们去package.json去看一下，如果vue-router是4.0.0以上的就是支持vue3的

文档>>

第三步：向应用中添加vue-router的实例

1、打开main.ts

引入vue-router

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import Home from "./views/Home.vue"
import Login from "./views/Login.vue"
import ColumnDetail from "./views/ColumnDetail.vue"
import App from './App.vue'

const routerHistory = createWebHistory() // 引入路由方式
const router = createRouter({
    history: routerHistory, // 表示接入哪种类型的路由
    routes: [ // 定义路由信息
        {
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/login',
            name: 'login',
            component: Login
        },
        {
            path: '/column/:id', // 冒号后面表示传的动态参数
            name: 'column',
            component: ColumnDetail
        }
    ]
})

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

配置

跳转

      者也专栏
        

            
登陆
            
注册
        

路由URL传参数的方式

1、HTML中两种跳转方式

// 第一种：对象方式
进入专栏
// 第二种：模版字符串方式
进入专栏

2、编程式跳转

3、使用vue-router提供的钩子函数获取路由参数

import { defineComponent } from 'vue'
import { useRoute } from 'vue-router' // 注意写法，是useRoute不是useRouter
import { testData, testPosts } from '../testData'
import PostList from '../components/PostList.vue'
export default defineComponent({
    components: {
        PostList
    },
    setup() {
        const route = useRoute()
        const currentId = +route.params.id; // +表示将字符串类型数字转成数字类型
        const column = testData.find(c => c.id === currentId)
        const list = testPosts.filter(post => post.columnId === currentId)
        return {
            column,
            list
        }
    }
})