vue中router.js,vue3.0 router

　　本文详细讲解了vue3类型脚本vue-路由器的使用方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

目录

　　 简单使用创建项目脚手架创建轻快地创建安装某视频剪辑软件路由器创建/修改组件修改入口分时（同分时)启动某视频剪辑软件在浏览器中访问文件结构图片综合使用动态参数使用看监听动态参数使用组合应用程序接口监听动态参数重定向命名与别名命名路由命名视图别名嵌套路由编程式路由

简单使用

创建项目

vue-cli创建

　　$npm install -g @vue/cli

　　$vue -版本

　　@vue/cli 4.5.15

　　$vue创建我的项目

　　然后的步骤：

　　请选择一个预设

　　选择手动选择功能检查项目所需的功能

　　选择上打字稿，特别注意点空格是选择，点回车是下一步选择您想要用来启动项目的vue . j版本

　　选择3.x(预览版)使用类样式的组件语法

　　直接回车在以打字打的文件旁边使用巴比伦式的城市

　　直接回车选择棉绒/格式化程序配置

　　直接回车对路由器使用历史模式？

　　直接回车选择棉绒/格式化程序配置

　　直接回车挑选附加棉绒特征

　　直接回车你更喜欢把埃斯林特巴贝尔等的配置放在哪里？

　　直接回车将此存储为未来项目的预置？

　　直接回车文件结构：

　　我的项目

　　- babel.config.js

　　- package-lock.json

　　- package.json

　　-公共

　　 - favicon.ico

　　-index.html

　　- README.md

　　- src

　　 - App.vue

　　 -资产

　　 -logo.png

　　 -组件

　　 - HelloWorld.vue

　　 - main.ts

　　 -垫片-真空吸尘器

　　- tsconfig.json

　　-节点模块

　　 - .

　　入口文件为src/main.ts

vite创建

　　执行以下命令创建项目

　　$npm init vite-app项目名称

　　$cd项目-名称

　　$npm安装

　　$npm运行开发

　　文件结构：

　　项目名称

　　index.html

　　- package-lock.json

　　- package.json

　　-公共

　　 - favicon.ico

　　- src

　　 - App.vue

　　 -资产

　　 -logo.png

　　 -组件

　　 - HelloWorld.vue

　　 - index.css

　　 - main.js

　　-节点模块

　　 - .

　　入口文件为src/main.ts

　　注意：由于使用轻快地方法创建的项目没有某视频剪辑软件的声明文件，所以需要我们自定义，否则会报错src/shims-vue.d.ts

　　/* eslint-disable */

　　声明模块"*"。vue {

　　从“vue”导入类型{定义组件}

　　常量组件：定义组件{}，{ }，any

　　导出默认组件

　　}

安装vue-router

　　$npm安装某视频剪辑软件路由器@4

　　至此，package.json如下：

　　{

　　名称:我的项目，

　　版本: 0.1.0 ,

　　私有:对，

　　脚本:{

　　serve: vue-cli-service serve ，

　　构建: vue-CLI-服务版本，

　　lint : vue-CLI-服务皮棉

　　},

　　依赖项:{

　　"核心-js":^3.6.5，

　　^3.0.0,

　　"路由器":^4.0.12

　　},

　　devDependencies: {

　　@ typescript-eslint/eslint-plugin :^4.18.0

　　@ typescript-eslint/parser :^4.18.0，

　　@vue/cli-plugin-babel: ~4.5.0 ，

　　@ vue/CLI-plugin-eslint : ~ 4。5 .0 ,

　　@ vue/CLI-plugin-typescript : ~ 4。5 .0 ,

　　@vue/cli-service: ~4.5.0 ，

　　@vue/compiler-sfc: ^3.0.0

　　@ vue/eslint-config-typescript :^7.0.0，

　　"埃斯林特":^6.7.2,

　　“eslint-plugin-vue":^7.0.0，

　　类型脚本: ~4.1.5

　　}

　　}

创建/修改组件

　　创建src/router/index.ts

　　从" vue路由器"导入{ createRouter，createWebHashHistory }

　　从以下位置导入主页./components/Home.vue

　　关于从导入./components/About.vue

　　导入用户自./components/User.vue

　　常量路由=[

　　//路由器参数详细看下文

　　{

　　路径："/home "，

　　姓名：家，

　　组件：主页

　　},

　　{

　　路径："/关于"，

　　名称："关于",

　　组件：关于

　　},

　　{

　　路径："/user/:uid "，//动态参数

　　姓名：用户，

　　组件：用户

　　}

　　]

　　导出常量路由器=创建路由器({

　　history: createWebHashHistory()，

　　路线：路线

　　})

　　创建组件：Home.vue About.vue User.vue

　　src/components/Home.vue

　　模板

　　divhome组件/div

　　/模板

　　脚本语言

　　从“vue”导入{定义组件}；

　　导出默认定义组件({

　　姓名：家，

　　setup() {

　　返回{

　　//返回的数据

　　};

　　},

　　});

　　/脚本

　　src/components/About.vue

　　模板

　　迪瓦约组件/div

　　/模板

　　脚本语言

　　从“vue”导入{定义组件}；

　　导出默认定义组件({

　　名称："关于",

　　setup() {

　　返回{

　　//返回的数据

　　};

　　},

　　});

　　/脚本

　　src/components/User.vue

　　模板

　　divUser组件/div

　　/模板

　　脚本语言

　　从“vue”导入{定义组件}；

　　导出默认定义组件({

　　姓名：用户，

　　setup() {

　　返回{

　　//返回的数据

　　};

　　},

　　});

　　/脚本

　　修改App.vue

　　模板

　　div{{ appMessage }}/div

　　！-路由器链接会被渲染成a标签-

　　路由器链接到=/home home/路由器链接

　　路由器链接到=/about about/路由器链接

　　router-link to=/user/lczmx user/router-link

　　！-路由出口-

　　！-路由匹配到的组件将渲染在这里-

　　路由器视图/路由器视图

　　/模板

　　脚本语言

　　从“vue”导入{定义组件}；

　　导出默认定义组件({

　　名称："应用程序",

　　setup() {

　　const appMessage=App组件；

　　返回{

　　//返回的数据

　　appMessage，

　　};

　　},

　　});

　　/脚本

　　风格

　　/* 添加样式*/

　　#app {

　　文本对齐：居中；

　　边距-顶部：50px

　　}

　　一个{

　　边距：30px

　　显示：内嵌-块；

　　}

　　/风格

修改入口ts

　　修改src/main.ts:

　　从“vue”导入{ createApp }

　　从导入应用程序 App.vue

　　"导入"。/index.css

　　从导入{路由器}。/路由器

　　//创建应用返回对应的实例对象

　　const app=createApp(App)

　　//安装某视频剪辑软件路由器插件

　　app.use(路由器)

　　//调用增加方法

　　app。装载(应用数量)

启动vue

　　$npm运行服务

　　我的项目@0.1.0服务

　　vue-CLI-服务服务器

　　信息启动开发服务器.

　　发出复制插件后的98%

　　6387毫秒内编译成功下午4:14:30

　　应用程序运行于：

　　-本地：http://本地主机：8080/

　　-网络：http://192.168.43.12:8080/

　　请注意，开发构建并没有优化。

　　若要创建生产版本，请运行新公共管理运行版本。

　　未发现任何问题。

在浏览器中访问

　　根据提示，访问http://本地主机：8080/,如下图

文件结构图片

综合使用

动态参数

　　假如我们需要的路由是：/user/lczmx和/用户/杰克，但是我们明显不可能为这两个路由定义两个不同的组件，最好的方法就是使用动态参数：

　　常量路由=[

　　//动态段以冒号开始

　　{路径："/users/:id "，组件：用户},

　　//使用正则表达式`()` 里面的东西会传给前面的路径匹配

　　//值在route.params.pathMatch下

　　{路径："/:路径匹配(.*)*,名称："未找到",组件：未找到},

　　]

　　匹配时，会将参数映射到路由器实例的电流输出。价值。参数上

　　注意vue2中：由于在设置无法使用这个。$路线和这个。$路由器

　　至于如何获取，看我的另一篇博客：vue3获取当前路由和官网：Vue路由器和组合式应用程序接口

　　匹配列表

　　匹配模式匹配路径当前路由的参数/users/:username/users/Eduardo { username: Eduardo }/users/:username/posts/:postId/users/Eduardo/posts/123 { username: Eduardo ，postId: 123 }在使用带有参数的路由时需要注意：由于相同的组件实例将被重复使用，所以组件的生命周期钩子不会被调用

　　但是我们可以对路由进行监听

使用watch监听动态参数

　　修改src/components/User.vue:

　　模板

　　divUser组件/div

　　p当前用户：{{ uid }}/p

　　router-link to=/user/lczmx lczmx/router-link

　　路由器-链接到=/用户/插孔插孔/路由器-链接

　　/模板

　　脚本语言

　　从“vue”导入{ defineComponent，watch，ref }；

　　从" vue路由器"导入{用户外部}；

　　导出默认定义组件({

　　姓名：用户，

　　setup() {

　　const router=user outer()；

　　const uid=ref(路由器。电流输出。价值。参数。uid)；

　　手表（

　　//监听非响应式数据

　　()=路由器。电流输出。值，

　　(val)={

　　//修改用户界面设计(用户界面设计的缩写)

　　uid。值=val。参数。uid

　　}

　　);

　　返回{

　　//返回的数据

　　uid，

　　};

　　},

　　});

　　/脚本

使用组合API监听动态参数

　　https://下一个。路由器。vue js。org/zh/guide/advanced/composition-API。超文本标记语言

重定向

　　下面使用路由器的全部参数：

　　常量路由=[

　　{

　　路径："/",

　　//写法一写死全球资源定位器(统一资源定位器)

　　//重定向："/home "，//访问/ 时跳转到/home

　　//写法2跳转到对应的命名路由

　　重定向：{ name: home }，

　　//写法3定义一个方法

　　//该方法亦可以返回一个相对路径

　　/*

　　重定向：收件人={

　　//方法接收目标路由作为参数到

　　//返回重定向的字符串路径/路径对象

　　//查询指定参数

　　返回{路径：“/home”，查询：{ q: to.params.searchText } }

　　},

　　*/

　　},

　　{

　　路径："/home "，

　　姓名：家，

　　组件：主页

　　}

　　]

　　注意，重定向不会触发导航守卫

　　另附官网的例子：命名视图- Vue路由器四示例

命名与别名

命名路由

　　给路由一个名称，可以在其他路由中使用，如：重定向和路由器链接

　　常量路由=[

　　{

　　路径："/user/:用户名"，

　　姓名：用户，

　　组件：用户

　　}

　　]

　　在再直接的的使用如上文，而路由器链接如下：

　　模板

　　divUser组件/div

　　p当前用户：{{ uid }}/p

　　router-link :to={ name: user ，params: { uid: lczmx } }

　　lczmx/路由器-链接

　　router-link :to={ name: user ，params: { uid: jack } }

　　插孔/路由器链接

　　/模板

　　在路由器.推送(路由器是路由器对象)中使用：

　　router.push({ name: user ，params: { uid: lczmx } })

命名视图

　　即，我们可以路由器视图定义一个名字，已达到实现可复用的效果

　　我们可以使用这个功能实现一个侧边栏等

　　举个例子

　　定义路由：

　　从" vue路由器"导入{ createRouter，createWebHashHistory }

　　从以下位置导入主页./components/Home.vue

　　关于从导入./components/About.vue

　　导入用户自./components/User.vue

　　常量路由=[

　　{

　　路径："/",

　　组件：{

　　默认值：首页，//默认用主页组件

　　答：关于，//a用关于组件

　　乙：用户，//b用用户组件

　　},

　　},

　　{

　　路径："/home "，

　　组件：{

　　默认值：关于，//默认用关于组件

　　答：家，//a用主页组件

　　乙：用户，//b用用户组件

　　},

　　},

　　]

　　导出常量路由器=创建路由器({

　　history: createWebHashHistory()，

　　路线：路线

　　})

　　修改App.vue

　　模板

　　div{{ appMessage }}/div

　　！-路由器链接会被渲染成a标签-

　　路由器链接到=///路由器链接

　　路由器链接到=/home /home/路由器链接

　　！-路由出口-

　　！-路由匹配到的组件将渲染在这里-

　　！-默认-

　　路由器视图/路由器视图

　　路由器视图名称=关于/路由器视图

　　路由器视图名称=用户/路由器视图

　　/模板

　　脚本语言

　　从“vue”导入{定义组件}；

　　导出默认定义组件({

　　名称："应用程序",

　　setup() {

　　const appMessage=App组件；

　　返回{

　　//返回的数据

　　appMessage，

　　};

　　},

　　});

　　/脚本

　　风格

　　/* 添加样式*/

　　#app {

　　文本对齐：居中；

　　边距-顶部：50px

　　}

　　一个{

　　边距：30px

　　显示：内嵌-块；

　　}

　　/风格

　　其他组件About.vue:

　　模板

　　迪瓦约组件/div

　　/模板

　　Home.vue:

　　模板

　　divhome组件/div

　　/模板

　　User.vue

　　模板

　　divuser组件/div

　　/模板

　　启动服务并访问某视频剪辑软件

　　如图：

　　假如不指定视图名，那么为系统默认值

别名

　　可以实现不同全球资源定位器(统一资源定位器)访问同一路由的效果

　　常量路由=[

　　//可以访问/home 也可以访问/

　　//且访问的路径不会改变

　　{

　　路径："/home "，

　　姓名：家，

　　成分：家，

　　别名："/"

　　}

嵌套路由

　　之前我们在App.vue中定义路由器视图，让其他组件在哪里渲染

　　但假如我们需要在其他组件中渲染的话，就需要嵌套路由了

　　使用孩子们嵌套路由，它的值是路由数据，就好像外部的路由器那样定义

　　例子：

　　router.index.ts

　　从" vue路由器"导入{ createRouter，createWebHashHistory }

　　从以下位置导入主页./components/Home.vue

　　关于从导入./components/About.vue

　　导入用户自./components/User.vue

　　从导入用户主目录./components/UserHome.vue

　　从导入用户设置./components/UserSettings.vue

　　从导入用户配置文件./components/UserProfile.vue

　　常量路由=[

　　//可以访问/home 也可以访问/

　　//且访问的路径不会改变

　　{

　　路径："/home "，

　　姓名：家，

　　成分：家，

　　别名："/"

　　},

　　{

　　路径："/关于"，

　　名称："关于",

　　组件：关于

　　},

　　{

　　路径："/user/:uid "，//动态参数

　　姓名：用户，

　　组件：用户，//内部有路由器视图渲染要嵌套的路由

　　儿童：[

　　//匹配形如/user/lczmx的全球资源定位器(统一资源定位器)

　　{路径： ,组件：用户主页}，

　　//匹配形如/用户/lczmx/设置的全球资源定位器(统一资源定位器)

　　{路径："设置",组件：用户设置，名称："用户设置"},

　　//匹配形如/user/lczmx/profile的全球资源定位器(统一资源定位器)

　　{路径：配置文件，组件：用户配置文件，名称：用户配置文件 }

　　]

　　}

　　]

　　导出常量路由器=创建路由器({

　　history: createWebHashHistory()，

　　路线：路线

　　})

　　注意：假如孩子们中没有路径：""的话，那么访问/user/lczmx，只能得到一个页面空白

　　User.vue

　　模板

　　差异

　　路由器链接：to={ name: user-settings } 设置/路由器链接

　　路由器链接：to={ name: user-profile } 配置文件/路由器链接

　　/div

　　路由器视图/路由器视图

　　/模板

　　UserHome.vue

　　模板

　　差异用户主页/div

　　/模板

　　UserProfile.vue

　　模板

　　差异用户详细信息页面/div

　　/模板

　　UserSettings.vue

　　模板

　　差异用户设置页面/div

　　/模板

　　启动并访问

　　在浏览器中测试：

编程式路由

　　即不通过a标签，而是通过js/ts改变路由，原理是向历史栈添加一个新的记录

　　在vue3中，有以下写法

　　模板

　　迪瓦约组件/div

　　按钮@click=更改路由器修改路由/按钮

　　/模板

　　脚本语言

　　从“vue”导入{定义组件}；

　　从" vue路由器"导入{用户外部}；

　　导出默认定义组件({

　　名称："关于",

　　setup() {

　　//获得路由器对象

　　const router=user outer()；

　　const changeRouter=()={

　　/* 修改路由的例子*/

　　//1 字符串路径

　　路由器。push(/users/lczmx )；

　　//2 带有路径的对象

　　路由器。push({ path:/users/lczmx })；

　　//3 命名的路由，并加上参数，让路由建立全球资源定位器(统一资源定位器)

　　router.push({ name: user ，params:{ username: lczmx } })；

　　//4 带查询参数，结果是/注册？计划=私人

　　router.push({ path: /register ，query:{ plan: private } })；

　　//5 带哈希，结果是/关于#团队

　　router.push({ path: /about ，hash: # team })；

　　//6 我们可以手动建立url，但我们必须自己处理编码

　　const username= lczmx

　　路由器。push(`/user/$ { username } `)；//-/用户/lczmx

　　//同样

　　路由器。push({ path:`/user/$ { username } `})；//-/用户/lczmx

　　//如果可能的话，使用`名称和`参数从自动统一资源定位器编码中获益

　　router.push({ name: user ，参数：{用户名} })；//-/用户/lczmx

　　//7个“参数”不能与`路径一起使用，否则`参数将会被忽略

　　路由器。push({ path:"/user "，params:{ username } })；//-/用户

　　//8替换为真实的不向历史中添加

　　router.push({ path: /home ，replace:true })；

　　//等同于

　　路由器。替换({ path:/home })；

　　//9 横跨历史

　　//向前移动一条记录，与路由器。转发()相同

　　路由器。go(1)；

　　//返回一条记录，与router.back()相同

　　路由器。go(-1)；

　　//前进3条记录

　　路由器。go(3)；

　　//如果没有那么多记录，静默失败

　　路由器。go(-100)；

　　路由器。go(100)；

　　};

　　返回{

　　//返回的数据

　　更改路由器，

　　};

　　},

　　});

　　/脚本

　　风格

　　按钮{

　　边距：30px

　　}

　　/风格

　　更多见vue-router4官网：Vue路由器

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。