vue3.0中vue-router路由的创建及使用
下载vue-router,一定要注意版本!npm install vue-router@/next --savesrc目录下创建router文件夹,router文件夹下创建index.jsvue3.0下需要引入createRouter, createWebHistory 模块去创建路由createWebHistory 使用history模式import { createRouter, create
·
- 下载vue-router,一定要注意版本!
npm install vue-router@/next --save
使用vuex 统一也是要安装最新版本
npm install --save vuex@next -D
- src目录下创建router文件夹,router文件夹下创建index.js
vue3.0下需要引入createRouter, createWebHistory 模块去创建路由
createWebHistory 使用history模式
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/home'
// import MusicList from '../views/musicList'
const routes = [
// 注意这里使用路由path:'/',Home, 如果你在app.vue 已经加载了首页,要删除app.vue中的组件,不然会重复加载
{
path:'/',
component:Home
},
{
path: '/musicList',
component: ()=> import('../views/musicList/index')
}
]
const routerHistory = createWebHistory()
const routers = createRouter({
history: routerHistory,
routes: routes
})
export default routers
3. 在main.js 中使用router
import { createApp } from 'vue'
import App from './App.vue'
import router from "./router"
const app = createApp(App)
app.use(router)
app.mount('#app')
或者链式调用
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
- 在App.vue 中引入
<template>
<router-view />
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
*{
margin: 0;
padding: 0;
font-family: '微软雅黑';
box-sizing: border-box;
}
</style>
- 开始使用
<router-link to='/musicList'></router-link>
// 或者
<router-link :to='{path:'/musicList'}'></router-link>
- setup里面获取不到this,路由提供了两个方法useRouter和useRoute来替代原来的api
import { useRouter, useRoute } from "vue-router"
export default {
setup(){
//router为VueRouter的实例,相当于一个全局的路由器对象,里面含有很多属性和子对象,
//例如history对象;经常用的跳转链接就可以用this.$router.push,和router-link跳转一样。
const router =useRouter() //==>this.$router
// route相当于当前正在跳转的路由对象。。可以从里面获取name,path,params,query等
const route=useRoute()//this.$route
const goRouter = () => {
router.push("/about");
}
return{
goRouter
}
}
}
更多推荐
已为社区贡献3条内容
所有评论(0)