山东省建设厅官方网站,抖音代运营业务介绍,实体店线上线下运营模式,如何查看网站是哪家公司做的在传统的 Web 页面开发过程中#xff0c;可以借助超级链接标签实现站内多个页面间的相互跳转#xff0c;而在现代的工程化、模块化下开发的Web页面只有一个#xff0c;在一个页面中需要实现站内各功能页面渲染#xff0c;相互跳转#xff0c;这时些功能的实现#xff0c;…在传统的 Web 页面开发过程中可以借助超级链接标签实现站内多个页面间的相互跳转而在现代的工程化、模块化下开发的Web页面只有一个在一个页面中需要实现站内各功能页面渲染相互跳转这时些功能的实现都需要依赖路由来完成。
基本配置
在 Vue 3中配置路由之前需要先安装路由并且安装的版本必须是4.0以上因此在vue-cli中通过下列命令来安装路由模块
npm install -g vue-router4.1.6上述命令中-g表示全局安装可以指定安装模块的版本号。
路由模块安装成功后接下来就可以配置路由配置的方法是先在项目的src文件夹下添加一个名称为router的新文件夹并在该文件夹中添加一个名称为index的js文件作为路由模块的配置文件目录结构如下所下图8-1所示 与Vue2一样路由的管理通常都在src/router目录下如果路由配置不多则只需要一个index.js文件来管理如果是Vue2则在该文件中加入如清单8-1所示代码
代码清单8-1 index.js代码
import VueRouter from vue-router
const routes [// ...
]
const router new VueRouter({mode: history,base: process.env.BASE_URL,routes,
})
export default router
在上述代码中通过 new 的方式实例化一个路由对象并且在实例化对象时使用mode选项配置访问路径模式base选项设置history模式下路由切换时的基础路径;而在Vue3中简化了创建路由时的配置项代码如下清单8-2的所示
代码清单8-2 index.js代码
import { createRouter, createWebHistory } from vue-router
const routes [// ...
]
const router createRouter({history: createWebHistory(process.env.BASE_URL),routes
})
export default router
在上述代码中通过createRouter 函数来创建一个新路由对象在创建对象时使用 history 来代替 Vue 2 中的mode选项同时合并了base选项将base选项的值作为模式函数createWebHistory的参数来传入。
需要说明下路由的访问模式分为两种hash和history前者模式访问路径带#号符支持所有的浏览器如“http://abc.com/#/list”而后者模式访问路径不带#号符并且只有主流的浏览器支持同时还需要后端做相应的配置如“http://abc.com/list”。
此外如果项目不是部署在根目录下而是二级、三级目录中那么就必须通过base选项来指定具体的目录否则路由在切换时将会报错base选项默认值是“/”表示在根目录下部署该值也可以设置为相对路径如“./”这样就可以部署在任意目录下。
**注意**如果项目比较复杂路由比较多则需要在router文件夹中再添加一个routes.js文件用于管理各模块的路由配置。
