安装路由,注意需要4.x版本
npm install vue-router -s
在src
目录下新建router\index.js
import {
createRouter,
createWebHashHistory
} from 'vue-router'
const router = createRouter({
history: createWebHashHistory(),
routes: [{
path: "/",
name: "index",
component: () => import( /* webpackChunkName: "index" */ "@/views/index/index"),
meta: {
title: "首页"
}
},
{
path: "/main",
name: "main",
component: () => import( /* webpackChunkName: "main" */ "@/views/main/main"),
meta: {
title: "主要"
}
}
]
})
export default router;
在main.js
进行导入
import {
createApp
} from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')
App.vue
新增
<router-view></router-view>
在vue
中使用
<script>
import {
useRouter
} from "vue-router";
export default {
setup() {
const router = useRouter()
const methods = {
goMain() {
router.push({
path: "/main",
query: {
id: 123
}
})
}
}
return {
...methods
};
},
};
</script>
接收参数
<script>
import {
onMounted
} from "vue";
import {
useRoute
} from "vue-router";
export default {
setup() {
const route = useRoute()
onMounted(() => {
console.log(route.query.id)
})
}
}
</script>