Vue3引入vue-router路由并通过vue-wechat-title设置页面

简介: 对于用类似Vue前后端分离技术架构的单页应用页面之间的跳转没有非前后端分离那么来得直接,甚至连设置跳转页面的Title都要费一番周折,本文介绍Vue3引入vue-router路由并设置页面Title,通过vue-router实现页面的路由,通过vue-wechat-title来设置页面的title。

对于用类似Vue前后端分离技术架构的单页应用页面之间的跳转没有非前后端分离那么来得直接,甚至连设置跳转页面的Title都要费一番周折,本文介绍Vue3引入vue-router路由并设置页面Title,通过vue-router实现页面的路由,通过vue-wechat-title来设置页面的title。

一、用vue-router库实现路由管理

vue-router是Vue.js官方推荐的路由管理库。它和Vue.js的核心深度集成,让构建单页应用变得轻松容易。使用Vue.js和vue-router库创建单页应用非常的简单:使用Vue.js开发,整个应用已经被拆分成了独立的组件;使用vue-router库,可以把路由映射到各个组件,并把各个组件渲染到正确的地方。下面就来介绍如何安装引入vue-router库并实现路由管理

1、安装vue-router库

使用如下命令安装vue-router库

npm install -save -vue-router
AI 代码解读

也可以通过 npm install -save vue-router@4 来指定版本号@4表示版本是4
安装成功后,可以在控制台看到了安装成功的信息和版本号
控制台看到了安装成功的信息和版本号
除此之外也可以在工程中的package.json中看到依赖的库中包含有vue-router及版本号。
package.json中看到依赖的库中包含有vue-router及版本号

2、在router文件夹下创建router.js

在工程的src目录下建立router文件夹 在router文件夹下创建router.js,该文件是Vue路由管理的核心文件,所有的各组件的路由在该文件中进行配置。
参考代码如下:

import {
   
    createRouter,createWebHistory } from "vue-router"; //引入vue-router组件
import HelloWorld from '@/components/HelloWorld';           //引入需要路由管理的页面组件HelloWorld
import siteLogin from '@/views/user/login';                 //引入需要路由管理的页面组件login
import userInfo from "@/views/user/userinfo";               //引入需要路由管理的页面组件userinfo
const router = createRouter({
   
   
    history:createWebHistory(),
    routes:[
        {
   
   
            path:'/',              //路由的路径
            name:'Home',           //路由的名称
            component:HelloWorld,  //路由的组件
        },
        {
   
   
            path:'/login',
            name:'Login',
            component:siteLogin,
        },
        {
   
   
            path:'/userinfo',
            name:'UserInfo',
            component:userInfo,
        }
    ]
})
export default router;
AI 代码解读

代码组织结构如下:
代码组织结构如下

3、在App.vue中加入路由视图

在App.vue中加入<router-view />
App.vue示例代码如下:

<template>
  <div id="app">
    <router-view />
  </div>
</template>
<script>
export default {
   
   
  name: 'App',
}
</script>
<style>
</style>
AI 代码解读

4、在项目的main.js中引入路由

参考代码如下:

import {
   
    createApp } from 'vue';
import App from './App.vue';
import router from "@/router/router";  //引入路由,会去找router下的router.js的配置文件
createApp(App).use(router).mount('#app')  //创建应用的时候应用路由
AI 代码解读

5、验证效果

为了显示更清楚,将默认创建的src\components\HelloWorld.vue内容稍加调整

<template>
  <div >
    第一个路由组件Home
    <p>{
   
   {
   
    name }}</p>
  </div>
</template>

<script>
export default {
   
   
  name: 'HelloWorld',
  data() {
   
   
    return {
   
   
      name:"Hello World!"
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
AI 代码解读

如果上面的步骤没有遗漏,在终端输入 npm run serve 将前端服务启动起来,在浏览器访问localhost:8080可以看到如下页面:

localhost:8080

访问localhost:8080/login

访问localhost:8080/login

访问localhost:8080/userinfo

访问localhost:8080/userinfo
可以看到访问不同的URL路由到了不同的Vue页面,上述login.vue和userinfo.vue示例代码没有给出,大家可以自行随便实现。

二、用vue-wechat-title实现页面title的设置

在上面实现了不同页面的路由管理,但是访问不同的URL看到的页面title所有的页面都是一样的,如何设置不同页面不同的页面Title呢?比较方便的做法是用vue-wechat-title来实现。
同样首先要安装vue-wechat-title库

1、安装vue-wechat-title库

使用如下命令安装vue-wechat-title库

npm install vue-wechat-title -save
AI 代码解读

安装完成后在工程中的package.json中看到依赖的库中包含有vue-wechat-title及版本号
package.json中看到依赖的库中包含有vue-wechat-title及版本号

2、在router文件夹下的router.js中增加title的配置

import {
   
    createRouter,createWebHistory } from "vue-router"; //引入vue-router组件
import HelloWorld from '@/components/HelloWorld';           //引入需要路由管理的页面组件HelloWorld
import siteLogin from '@/views/user/login';                 //引入需要路由管理的页面组件login
import userInfo from "@/views/user/userinfo";               //引入需要路由管理的页面组件userinfo
const router = createRouter({
   
   
    history:createWebHistory(),
    routes:[
        {
   
   
            path:'/',              //路由的路径
            name:'Home',           //路由的名称
            meta:{
   
   
                title: '首页'       //title配置
            },
            component:HelloWorld,  //路由的组件
        },
        {
   
   
            path:'/login',
            name:'Login',
            meta:{
   
   
                title:'登录'
            },
            component:siteLogin,
        },
        {
   
   
            path:'/userinfo',
            name:'UserInfo',
            meta:{
   
   
                title: '用户信息'
            },
            component:userInfo,
        }
    ]
})
export default router;
AI 代码解读

主要是在路由配置时设置了meta:{title:'xxxx'}如下图:

router.js中增加title的配置

3、在App.vue页面中使用

App.vue代码如下:

<template>
  <div id="app"  v-wechat-title="$route.meta.title">
    <router-view />
  </div>
</template>

<script>
export default {
   
   
  name: 'App',
}
</script>

<style>
</style>
AI 代码解读

主要是在<div id="app" v-wechat-title="$route.meta.title">` 加入了`v-wechat-title="$route.meta.title"

4、在main.js中引用vue-wechat-title

在main.js中引用vue-wechat-title的时候有个坑,如果按照一般的引用会报错
mian.js代码示例如下:

import {
   
    createApp } from 'vue';
import App from './App.vue';
import router from "@/router/router";  //引入路由,会去找router下的router.js的配置文件
import VueWechatTitle from 'vue-wechat-title'; //引入VueWechatTitle
createApp(App).use(router,VueWechatTitle).mount('#app')  //创建应用的时候应用路由
AI 代码解读

在终端输入 npm run serve 将前端服务启动起来会报错!

Uncaught TypeError: Cannot read properties of undefined (reading 'deep')

原因是在挂载app示例前,vue-wechat-title还没有加载好,一定要先应用再挂载app
将createApp(App).use(router,VueWechatTitle).mount('#app')删除或注释掉。改用

const app=createApp(App);
app.use(VueWechatTitle);
app.use(router);
app.mount('#app')
AI 代码解读

main.js的参考示例代码如下:

import {
   
    createApp } from 'vue';
import App from './App.vue';
import router from "@/router/router";  //引入路由,会去找router下的router.js的配置文件
import VueWechatTitle from 'vue-wechat-title'; //引入VueWechatTitle
//createApp(App).use(router,VueWechatTitle).mount('#app')  //指令定义在 mount('#app')之后,导致自定义指令未挂载到,会报错
const app=createApp(App);
app.use(VueWechatTitle);
app.use(router);
app.mount('#app')
AI 代码解读

5、验证效果

在终端输入 npm run serve 将前端服务启动起来
看到访问不同的URL会显示不同的title
http://localhost:8080/

http://localhost:8080/的title
http://localhost:8080/login

login的title登录

http://localhost:8080/userinfo

userinfo的title用户信息

本文通过以上实例实现了Vue3引入vue-router路由并设置页面Title,通过vue-router实现页面的路由,通过vue-wechat-title来设置页面的title都还比较方便。


博客地址:http://xiejava.ishareread.com/

目录
打赏
0
0
0
0
52
分享
相关文章
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项?
在使用`v-model`处理自定义组件双向数据绑定时,要仔细考虑各种因素,确保数据的准确传递和更新,同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循,能够更好地发挥`v-model`的优势,实现高效的双向数据绑定效果。
169 64
创建vue3项目步骤以及安装第三方插件步骤【保姆级教程】
这是一篇关于创建Vue项目的详细指南,涵盖从环境搭建到项目部署的全过程。
54 1
Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么?
总的来说,Vue 3 中的 `v-model` 在灵活性、与组合式 API 的结合、对自定义组件的支持等方面都有了明显的提升和改进,使其更适应现代前端开发的需求和趋势。但需要注意的是,在迁移过程中可能需要对一些代码进行调整和适配。
147 60
vue3使用pinia中的actions,需要调用接口的话
通过上述步骤,您可以在Vue 3中使用Pinia和actions来管理状态并调用API接口。Pinia的简洁设计使得状态管理和异步操作更加直观和易于维护。无论是安装配置、创建Store还是在组件中使用Store,都能轻松实现高效的状态管理和数据处理。
125 3
从Vue 2到Vue 3的演进
从Vue 2到Vue 3的演进
90 17
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
107 17
Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
65 8
除了provide/inject,Vue3中还有哪些方式可以避免v-model的循环引用?
需要注意的是,在实际开发中,应根据具体的项目需求和组件结构来选择合适的方式来避免`v-model`的循环引用。同时,要综合考虑代码的可读性、可维护性和性能等因素,以确保系统的稳定和高效运行。
56 1
|
2月前
|
Vue3中使用provide/inject来避免v-model的循环引用
`provide`和`inject`是 Vue 3 中非常有用的特性,在处理一些复杂的组件间通信问题时,可以提供一种灵活的解决方案。通过合理使用它们,可以帮助我们更好地避免`v-model`的循环引用问题,提高代码的质量和可维护性。
62 1
在 Vue 3 中,如何使用 v-model 来处理自定义组件的双向数据绑定?
需要注意的是,在实际开发中,根据具体的业务需求和组件设计,可能需要对上述步骤进行适当的调整和优化,以确保双向数据绑定的正确性和稳定性。同时,深入理解 Vue 3 的响应式机制和组件通信原理,将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等