本篇文章给大家谈谈vue路由路径，以及vue路由路径对页面不对对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、Vue路由的使用
• 2、Vue动态路由
• 3、vue路由（一、二级路由）

Vue路由的使用

路由允许我们通过不同的URL去访问不同的内容，该URL可以是我们自己设置的，在项目中并没有这样的文件夹，这种功能就是路由

路由的本质是hash值

定：定义路由组件

配：配置路由

实：实例化路由

挂：挂载路由

路由（vue-router）的基本作用就是将每个路径映射到对应的组件，通过修改路由进行组件之间的转换

常规路径规则为在当前路径后面加上"/path"，path即为设定的前端路由路径

  跳转到上一次的页面：this.$router.go(-1);

  指定跳转的地址：this.$router.replace("/path");

  指定跳转的路由名字下：this.$router.replace({name:"menuLink"});

  通过push进行跳转:this.$router.push("/path");

  或this.$router.push({name:"path"});

  （1）设置一个默认展示组件，（不推荐！！！）

        {path:"/",component:login}

    (2) 路由redirect重定向，设置默认组件

        {path:"/",redirect:"login"}

  （1）创建一个路由对象，当导入vue-router包之后，在window全局对象之中就有一个路由的构造函数VueRouter

  （2）在new路由对象的时候可以传递一个配置对象，这个配置对象的route表示路由器的匹配规则

  （3）每个路由规则都是一个对象，这个规则对象身上必须有两个属性

        属性1：path表示监听那个路由的链接地址

属性2：component表示如果路由是前面匹配到的path，则展示component属性对应的组件，

      component属性值必须是一个组件模板对象，不能是组件的引用名称

  （4）router：routerObj将路由规则对象，注册到VM实例上，用来监听URL地址的变化，然后展示对应的组件

  （5）使用vue官方提供的router-link元素使用它，默认渲染成一个a标签，router-link to="login"登录/router-link

  （6）在控制的div中（App.Vue）使用router-view/router-view

Vue动态路由

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果：

现在呢，像 /user/foo 和 /user/bar 都将映射到相同的路由。

一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params ，可以在每个组件内使用。于是，我们可以更新 User 的模板，输出当前用户的 ID：

你可以看看这个 在线例子 。

你可以在一个路由中设置多段“路径参数”，对应的值都会设置到 $route.params 中。例如：

除了 $route.params 外， $route 对象还提供了其它有用的信息，例如， $route.query (如果 URL 中有查询参数)、 $route.hash 等等。你可以查看 API 文档 的详细说明。

提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar ， 原来的组件实例会被复用 。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。 不过，这也意味着组件的生命周期钩子不会再被调用 。

复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象：

或者使用 2.2 中引入的 beforeRouteUpdate 导航守卫 ：

常规参数只会匹配被 / 分隔的 URL 片段中的字符。如果想匹配 任意路径 ，我们可以使用通配符 ( * )：

当使用 通配符 路由时，请确保路由的顺序是正确的，也就是说含有 通配符 的路由应该放在最后。路由 { path: '*' } 通常用于客户端 404 错误。如果你使用了 History 模式 ，请确保 正确配置你的服务器 。

当使用一个 通配符 时， $route.params 内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过 通配符 被匹配的部分：

vue-router 使用 path-to-regexp 作为路径匹配引擎，所以支持很多高级的匹配模式，例如：可选的动态路径参数、匹配零个或多个、一个或多个，甚至是自定义正则匹配。查看它的 文档 学习高阶的路径匹配，还有 这个例子 展示 vue-router 怎么使用这类匹配。

有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高。

vue路由（一、二级路由）

是前台为了实现单页面应用然后设置路径，根据不同的路径显示不同页面。但是这些路径在服务器上不是真是存在的

hash路由 默认的是hash路由

history路由

通过onhashchange()来检测路由的变化,根据不同的hash来显示不同元素。获取当前的hash值location.hash

通过onpopstate来检测history堆栈路径的变化，堆栈的路径是通过history.pushState(null, '',"?page=2")添加进去的

由hash路由设置成history路由，给路由添加配置项 mode="history"

1、设置相应组件

2、在router-index.js文件中添加配置

首先引入组件，然后配置规则 {path:设置路径，name:名，component:组件}

3、在需要现在组件的地方给页面添加router-view/router-view

4、设置导航路径

使用vue提供 router-link to="路径"/router-link 默认的解析成a标签

5、设置默认路由

6、设置导航样式

1、需要定义组件

2、确定好在那个组件配置二级路由，就去那个组件的配置规则中添加children关键字，按照一级路由的配置方法配置规则

3、在需要配置二级路由的组件中添加router-view

4、设置导航 router-link to="/ / "

5、设置导航链接的样式

我们可以定义一个一级路由，里面可以包裹底部footer组件，让他为二级路由，这时点击底部的二级路由时，就会切换不同的页面，而不需要底部组件显示的时候，那我们在配置一个一级路由就好了！！！

vue路由路径的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vue路由路径对页面不对、vue路由路径的信息别忘了在本站进行查找喔。