0
点赞
收藏
分享

微信扫一扫

vue3 ----vue-router


1、安装

npm install vue-router@next --save

2、使用

在src目录下面建一个路由文件routes.ts

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

//引入组件
import Home from "./components/home.vue"
import Location from "./components/location.vue"


const routes = [
{
path: '', redirect: '/home' //路由重定向
},
{
//alias路由别名,user访问的也是home页面,也可以配置多个
// 如:alias:["/c","/n"]
path: '/home', alias: "/user", component: Home
},
{
path: '/location', component: Location
}
]


//配置路由

const router = createRouter({
// history: createWebHashHistory(),//哈希模式
history: createWebHistory(),//h5 History 模式 这种方式上线需要服务器配置伪静态
routes
})


// 暴露路由实例对象
export default router

3、在main.ts中挂载路由

import { createApp } from 'vue'

import App from './App.vue'
import routes from "./routes"
const app = createApp(App)


//挂载路由
app.use(routes)
app.mount('#app')

4、在App.vue中通过router-view渲染组件

<template>
哎呀

<router-link to="/">首页</router-link>
<router-link to="/location">本地</router-link>
<router-view></router-view>
</template>


<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
name: "App",
setup() {},
});
</script>

<style lang="scss">
</style>


举报

相关推荐

0 条评论