vue3 路由配置

vue-router下载

//npm
npm install vue-router@4
//yarn
yarn add vue-router@4

引入createRouter创建实例

import { createRouter,createWebHistory,createWebHashHistory } from "vue-router";

const routes = [
    {
       
    },
]

const router = createRouter({
	//路由模式
    history:createWebHistory(),
    routes
})

export default router

main.js引入

import router from './router/index'

const app = createApp(App)

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

注意

app.use(router)需要在app.mount('#app')前执行，否则会报以下错误

Failed to resolve component: router-view
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement

vue3解析component: router-view失败  

因为加载时router-view、router-link等未被渲染

route获取路由信息

导入路由组件

import { useRoute } from 'vue-router'

定义变量

const route = useRoute();

获取路由信息

console.log(route);

router操作路由

导入路由组件

import { useRouter } from 'vue-router'

定义变量

const router = useRouter();

操作路由

router.push({
  	name:'vc2',
    params:{
        name:name.value
    }
})