vue多个路由访问一个页面,如何动态修改页面的name
时间: 2024-05-10 12:20:52 浏览: 6
在Vue中,可以通过$route对象来获取当前路由信息,包括路由的name属性。所以,可以在页面中通过监听$route对象的变化来动态修改页面的name。具体代码如下:
```javascript
export default {
data() {
return {
pageTitle: ''
}
},
mounted() {
this.pageTitle = this.$route.name
},
watch: {
$route(to, from) {
this.pageTitle = to.name
}
}
}
```
在上面的代码中,我们定义了一个data属性pageTitle来存储页面的标题。在mounted生命周期钩子中,我们将pageTitle设置为当前路由的name属性。然后,通过watch监听$route对象的变化,当路由发生变化时,更新pageTitle的值为新的路由的name属性,从而动态修改页面的标题。
相关问题
vue.js实现一个页面多个路由
Vue.js 可以使用动态路由和命名路由来实现一个页面多个路由的效果。
动态路由是指在路由路径中加入参数,例如:
```
{
path: '/user/:userId',
component: User
}
```
这个路由可以匹配类似 `/user/123` 这样的路径,其中的 `123` 就是动态参数 `:userId`。
命名路由是指给每个路由一个名称,例如:
```
{
path: '/user/:userId',
name: 'user',
component: User
}
```
这个路由可以使用 `$router.push({ name: 'user', params: { userId: 123 } })` 来跳转,其中的 `123` 就是动态参数 `:userId`。
在实现一个页面多个路由的时候,可以将多个动态路由或者命名路由都指向同一个组件,例如:
```
{
path: '/user/:userId',
name: 'user',
component: User
},
{
path: '/group/:groupId',
name: 'group',
component: User
}
```
这样 `/user/123` 和 `/group/456` 都会渲染 `User` 组件。在 `User` 组件中可以通过 `$route.params.userId` 或者 `$route.params.groupId` 来获取动态参数。
给我一个 vue3 多页面 配置 和 路由 代码
好的,以下是一个基本的 vue3 多页面配置和路由代码:
```javascript
// vue.config.js
module.exports = {
pages: {
page1: {
entry: "src/main1.js",
template: "public/page1.html",
filename: "page1.html"
},
page2: {
entry: "src/main2.js",
template: "public/page2.html",
filename: "page2.html"
}
},
configureWebpack: {
// 配置多页面同步使用的公共模块
optimization: {
splitChunks: {
cacheGroups: {
common: {
name: "common",
chunks: "initial",
minChunks: 2
}
}
}
}
}
}
```
```javascript
// src/main1.js 和 src/main2.js 都差不多,只是页面的挂载点不同
import { createApp } from "vue"
import App from "./App.vue"
import router from "./router"
createApp(App).use(router).mount("#app1")
```
```javascript
// router.js
import { createRouter, createWebHashHistory } from "vue-router"
import Page1 from "./views/Page1.vue"
import Page2 from "./views/Page2.vue"
const router = createRouter({
history: createWebHashHistory(),
routes: [
{ path: "/page1", component: Page1 },
{ path: "/page2", component: Page2 },
]
})
export default router
```
希望这些代码对你有所帮助!
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)