首先要有一个路由的js文件
import { createRouter, createWebHashHistory} from "vue-router";
import appHome from '../views/Home.vue' import itemMusic from '../views/ItemMusic.vue'
将要路由的组件引入进来
const routes = [{ path: '/', name: 'appHome', component: appHome }, { path: '/itemMusic', name: 'itemMusic', component: itemMusic } ]
写路由配置一般主页面路径就是'/'
const router = createRouter({ history: createWebHashHistory(process.env.BASE_URL), routes })
创建一个路由器把路由写进去(其实和真路由器有点像,先买个路由器在自己写路由)
然后不要忘了暴露
在main.js里面使用路由
import router from './router/index.js' const app = createApp(App) app.use(router) app.mount('#app')
好像得把原来的app写法改一下(js还是不够扎实。。)
然后去app里面把 <RouterView></RouterView>写进去,当然些别的地方也行。
(因为有'/'的存在所以我觉得 <RouterView></RouterView>只能写一个吧,)
<RouterLink :to="{name:'itemMusic',query:{id:music.id}}">你想包的东西</RouterLink>
最后在link里边配置to,这里因为实在v-for里写的所以有个:。写上name或者path,可以传参
标签:vue,个人,app,js,import,router,路由 From: https://www.cnblogs.com/ZZDDElla/p/16965264.html