位置:首页 > web前端 > vue

vue3.x 路由的安装与使用

dearweb 发布:2021-08-10 22:53:55阅读:

相信接触过单页面应用的同学对路由并不陌生,今天主要给大家介绍一下vue3.x的路由创建以及使用。

路由的安装

npm安装
npm install vue-router --save

yarn安装
yarn add vue-router --save

路由全局挂载

我们与模块系统一起使用时,需要在main.js文件中使用 Vue.use() 全局挂载一下路由

import Vue from 'vue'import 
VueRouter from 'vue-router'
Vue.use(VueRouter)

新建router文件

在src目录下新建router文件夹,尔后在文件夹中新建router.ts或者router.js文件

image.png

在router文件中创建配置路由

// 引入路由组件
import { createRouter,createWebHashHistory } from "vue-router";

// 引入组件
import Home from '../components/Home.vue'
import News from '../components/news.vue'
import User from '../components/user.vue'

// 配置路由
const router= createRouter({
  history: createWebHashHistory(),
  routes:[
    {path:'/',component:Home},
    {path:'/news',component:News},
    {path:'/user',component:User},
  ],
})

// 暴露路由
export default router

在main.ts/main.js文件中引入路由

import { createApp } from 'vue'
import App from './App.vue'

// 引入路由
import route from './router/router'

let app = createApp(App)
// 挂载路由
app.use(route)
app.mount('#app')

最后在app.vue文件中写入router-view 动态挂载组件

<template>
<!-- 动态挂载组件 -->
  <router-view></router-view>
</template>

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

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

<style>
#app {
  margin-top: 60px;
}
</style>

上面就是vue3.x使用路由的基本流程及方法,你学会了吗?

24人点赞 返回栏目 提问 分享一波

小礼物走一波,支持作者

还没有人赞赏,支持一波吧

留言(问题紧急可添加微信 xxl18963067593) 评论仅代表网友个人 留言列表

暂无留言,快来抢沙发吧!

本刊热文
网友在读
手机扫码查看 手机扫码查看