vue-router路由的作用,vue router route
本文主要介绍Vue routing vue-router的详细讲解指南。对vue-router感兴趣的同学可以参考一下。
中文文件：https://router.vuejs.org/zh/
Erouter是Vue.js的官方路线管理器.它与Vue.js的核心深度集成，可以轻松构建单页面应用。其实路由可以理解为指向，就是当我点击一个页面上的按钮，需要跳转到相应的页面，这就是路由跳转；
首先，我们来学习三个单词(路由、路由、路由器):
路线：首先是单数，翻译成Route，也就是我们可以理解为单条路线或者某条路线；
Routes:它是一个复数，意思是多个数的集合可以是一个复数；也就是我们可以理解为多条路线的集合。JS中只有两种形式的集合表示多种不同的状态：数组和对象。实际上，官方将路线定义为数组；所以我们记住routes代表多个数组的集合；
路由器：翻译过来就是路由器，里面全是路由。这是一个路由器。我们可以理解为一个容器包含以上两个或者是一个管理器负责管理以上两个。以一个常见的场景为例：当用户点击页面上的按钮时，路由器会去routes查找路由，也就是说，路由器会去路由集查找对应的路由；
下面结合一个小演示来看一下(文章有点长，耐心慢慢看。学得慢，进步也快。当然，你也可以跟着打):
首先你需要安装vue-cli来搭建一个vue开发环境(这里不知道怎么安装，我自己去百度一下。如果你自己解决不了这类问题，后面的知识对你来说未必有利可图)
安装vue-cli后，我们的项目目录结构如下：
然后我们在命令行输入npm install vue-router -g来安装vue-router。安装完成后，我们可以打开package.json文件，在这里我们可以看到vue-router的版本号。
至此，我们的准备工作已经完成，该写demo了；
我们在src目录下新建三个文件，分别是page1.vue和page2.vue以及router.js:
page1.vue:
模板
差异
h1第1页/h1
p{{msg}}/p
/div
/模板
脚本
导出默认值{
data () {
返回{
消息：“我是第1页组件”
}
}
}
/脚本
page2.vue:
模板
差异
h1第2页/h1
p{{msg}}/p
/div
/模板
脚本
导出默认值{
data () {
返回{
消息：“我是第2页组件”
}
}
}
/脚本
router.js
//介绍vue
从“Vue”导入Vue；
//介绍vue路由器
从“vue-router”导入VueRouter
//需要使用第三方库才能使用。
Vue.use(VueRouter)
//参考第1页
从导入第1页。/page 1 . vue ；
//参考第2页
从导入第2页。/page 2 . vue ；
//定义路由的集合路由，数组类型
常量路由=[
//每个路由都是一个对象类型，path表示路径，component表示组件。
{路径：“/page1”，组件：page1}，
{路径：“/第2页”，组件：第2页}
]
//实例化VueRouter并添加路由
const router=new VueRouter({
//ES6缩写，等于routes:routes
路线
});
//抛出此实例对象供外部读取和访问。
导出默认路由器
这里再修改一下main.js。
从“vue”导入Vue
从导入应用程序。/App
//参考router.js
从导入路由器。/router.js
Vue.config.productionTip=false
/* eslint-禁用no-new */
新Vue({
埃尔： #app ，
//一定要注入到vue的实例对象中
路由器，
组件：{ App }，
模板：“应用程序/”
})
修改App.vue
模板
div id=应用程序
img src=。/assets/logo.png
差异
//点击//路由器链路定义页面中的触发部分。
router-link to=/page 1 page 1/router-link
router-link to=/page 2 page 2/router-link
/div
//router-view定义页面中显示的部分。
路由器视图/路由器视图
/div
/模板
脚本
导出默认值{
名称：“应用程序”
}
/脚本
风格
#app {
字体系列：“Avenir”，Helvetica，Arial，无衬线；
-webkit-font-smoothing:抗锯齿；
-moz-osx-font-smoothing:灰度；
文本对齐：居中；
颜色：# 2c3e50
边距-顶部：60px
}
/风格
这样我们的页面就可以路由切换了，路由的基本使用就完成了；但是有一个问题就是第一次进入的时候看不到路由页面。这是因为我们还没有设置默认值。当我们第一次进入时，路径是空的，所以我们可以这样解决它：
router.js
从“Vue”导入Vue；
从“vue-router”导入VueRouter
Vue.use(VueRouter)
从导入第1页。/page 1 . vue ；
从导入第2页。/page 2 . vue ；
从导入用户。/user.vue
常量路由=[
{路径：“/page1”，组件：page1}，
{路径：“/page2”，组件：page2}，
//可以配置重定向
{路径：，重定向：“第1页”}
//或者用空路径重写路由。
{路径：，组件：第1页}
]
const router=new VueRouter({
路线
});
导出默认路由器
以上两种方案都可以解决。配置重定向意味着当匹配路径为空时，它将重定向到page1并执行page1路由。或者我们可以重新配置一条路由，当路径为空时，router-view显示page1的页面；
分别重定向和配置路由的区别在于：
其实重定向就是在匹配的路径满足条件时执行相应的路由。当然，此时url上的地址显示的是对应的路由，页面也是对应的路由页面；
重新配置路由是指当匹配的路径满足条件时，路由器视图页面显示部分负责显示满足路由条件的页面。其实网址没变；
然后是一些基本路由达不到的复杂情况；我们继续往下看。
动态路线匹配：
其实在我们的生活中有很多这样的例子。不知道大家有没有注意到他们？比如在一个网站或者后台管理系统中，我们登录后，是不是一般都会有一个类似欢迎回来，XXX等的提示。我们可以通过动态路由来实现；
首先，在src目录中创建一个新的user.vue文件：
模板
差异
h1用户/h1
//在这里，可以通过$ route.params.name获取路由的参数。
p欢迎回来，{{$route.params.name}}/p
/div
/模板
脚本
导出默认值{
data () {
返回{
消息：“我是第1页组件”
}
}
}
/脚本
然后我们修改App.vue文件的代码：
模板
div id=应用程序
img src=。/assets/logo.png
差异
router-link to=/page 1 page 1/router-link
router-link to=/page 2 page 2/router-link
/div
//添加两个路由器链接标签
差异
路由器-link to=/user/xianyu 动态路由咸鱼/路由器-link
router-link to=/user/孟想动态路由梦想/router-link
/div
路由器视图/路由器视图
/div
/模板
脚本
导出默认值{
名称：“应用程序”
}
/脚本
风格
#app {
字体系列：“Avenir”，Helvetica，Arial，无衬线；
-webkit-font-smoothing:抗锯齿；
-moz-osx-font-smoothing:灰度；
文本对齐：居中；
颜色：# 2c3e50
边距-顶部：60px
}
/风格
修改我们的router.js
从“Vue”导入Vue；
从“vue-router”导入VueRouter
Vue.use(VueRouter)
从导入第1页。/page 1 . vue ；
从导入第2页。/page 2 . vue ；
从导入用户。/user.vue
常量路由=[
{路径：“/page1”，组件：page1}，
{路径：“/page2”，组件：page2}，
//{路径：，重定向：“第1页”}
{路径：，组件：第1页}，
//用冒号标记，匹配的时候参数值会设置为这个。$route.params
{路径：“/用户/:名称”，组件：用户}
]
const router=new VueRouter({
路线
});
导出默认路由器
一旦配置好，就可以正常运行，不出意外。我们来看看效果：
动态路由匹配给我们提供了便利，让我们通过配置一条路由实现部分页面修改的效果，给用户一种多页面的感觉。是不是很酷？
Cool也会给我们带来一些问题，因为在使用路由参数的时候，会通过从/user/xianyu导航到/user/孟想来重用原来的组件实例，两条路由都会渲染同一个组件。相比销毁再创建，显示复用效率更高，但问题是生命周期钩子函数不会再被调用，也就是不会再被触发。但是办法总比问题多，我们可以通过监控$route对象来实现；
修改user.vue的代码
模板
差异
h1用户/h1
p欢迎回来，{{msg}}/p
/div
/模板
脚本
导出默认值{
data () {
返回{
//msg:“我是第1页组件”
邮件：“”
}
},
观察：{
//to表示即将进入的组件，from表示来自哪个组件。
$路线(至，自){
this . msg=to . params . name；
console . log(111)；
}
}
}
/脚本
效果图如下：
我们可以清楚的看到我们正在监控的$route对象被触发，控制台输出；
让我们一起来看看嵌套路由：
嵌套路线：
很多时候，我们的页面结构决定了我们可能需要嵌套路由。比如我们进入首页，有类别，然后选择其中一个类别，就进入相应的细节。这时，我们可以使用嵌套路由。官方文档给我们提供了一个children属性，是一个数组类型，里面有一组路由；这时父子关系结构出来了，所以children属性中的路由是children属性的外部路由的一个子路由；
好的记忆胜过糟糕的代码。让我们看一下代码：
首先，在src目录中创建两个新的vue文件，即phone.vue和computer.vue
phone.vue
模板
差异
p{{msg}}/p
/div
/模板
脚本
导出默认值{
data () {
返回{
消息：“嵌套移动电话组件”
}
}
}
/脚本
计算机. vue
模板
差异
p{{msg}}/p
/div
/模板
脚本
导出默认值{
data () {
返回{
消息：“嵌套的计算机组件”
}
}
}
/脚本
然后我们修改App.vue文件：
模板
div id=应用程序
img src=。/assets/logo.png
差异
router-link to=/page 1 page 1/router-link
/div
路由器视图/路由器视图
/div
/模板
脚本
导出默认值{
名称：“应用程序”
}
/脚本
风格
#app {
字体系列：“Avenir”，Helvetica，Arial，无衬线；
-webkit-font-smoothing:抗锯齿；
-moz-osx-font-smoothing:灰度；
文本对齐：居中；
颜色：# 2c3e50
边距-顶部：60px
}
/风格
通过上面的App.vue文件我们可以看到，此时我们的页面上只有一个page1标签；
我们再修改一下router.js。
从“Vue”导入Vue；
从“vue-router”导入VueRouter
Vue.use(VueRouter)
从导入第1页。/page 1 . vue ；
从导入第2页。/page 2 . vue ；
从导入用户。/user . vue ；
从导入电话。/phone . vue ；
从导入计算机。/computer.vue
常量路由=[
{
路径：“/page1”，
组件：第1页，
儿童：[
{
路径：“电话”，
组件：电话
},
{
路径：“计算机”，
组件：计算机
},
]
},
//{ path:“/page 2”，组件：page2}，
////{路径：，重定向：“第1页”}
//{path: ，component:page1}，
//{ path:“/user/:name”，组件：user}
]
const router=new VueRouter({
路线
});
导出默认路由器
对于大家的直来直去的观点，其他路线都标注了，页面上只留了/page1路线；
如上所述，children属性实际上是一组子路由，数组结构中有子路由；
效果图如下：
有两种导航方式：
标签导航：标签导航router-linkrouter-link通过转义跳转到a/a标签，其中router-link标签中的to属性会被转义到A标签中的href属性；
//跳转到名为user的路由，并传递参数userId
router-link :to={ name: user ，params: { userId: 123 }} 用户/路由器-link
可编程导航：我们可以用这个。$router.push()方法实现程序化导航，当然也可以实现参数传递。这种程序化导航一般用于点击按钮后跳转。
router.push({ name: user ，params: { userId: 123 }})
两者都将导航到用户/123路径的路由。
路由：
有时候，用名字来标识一条路线更方便，所以为了让我们更容易偷懒，官方给路线加了一个名字属性。命名了这个属性之后，我们就可以通过访问这个属性直接访问路由了。
普通路线：
router . push({ path:/user/:userId ，params: { userId: 123 }})
路由：
router.push({ name: user ，params: { userId: 123 }})
其实两者没有区别，只提供了两种访问路由的方式，可以通过路径或者别名匹配；
以上是Vue-router Vue路由详解指南的详细内容。更多Vue路线讲解，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。