vue路由router,routes,route

SEO：搜索引擎优化，

前端路由：控制页面访问路径，单页面应用

后端路由：控制接口

1，URL的hash,locationhash

2,HTML5的history模式，historypushState(data,title,url)

使用vue create '文件名'，创建一个vue脚手架，

vueuse(VueRouter),调用vue-router这个对象上面的install方法，注册两个属性在vue原型对象上，分别是vueprototype$router(整个项目的路由对象)和vueprototype$route(当前活跃的路由对象)

实例化一个VueRouter对象

router-link相当于a标签，跳转页面。router-view相当于一个占位符，把现在页面访问的路径内容加载进来，替换掉router-view

vueRouter跳转页面的方式有用this$routerpush('/home')，this$routerreplace()和用标签<router-lin>

this$routerpush('/homekey='+vaule+'&key1='+vaule1)。在另一个页面用this$routequery获取传过来的值

第一种

父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。

接收参数

第二种

父组件：使用path来匹配路由，然后通过query来传递参数

这种情况下 query传递的参数会显示在url后面id=？

接收参数都是一样

第三种

在路由规则里定义如下

pid是一个变量，在用这个动态路由的时候可以

懒加载是当你点击一个页面时，先缓存所有的链接，不执行，只执行那个页面的资源，这样可以提升效率，提高响应速度。

路由懒加载很简单，在component用import引入组件，如下：

router相当于一个路由器，路由器里面有路由表，既routes，表中很多路由规则，route是routes的一个个路由规则

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

路由的本质是hash值

定：定义路由组件

配：配置路由

实：实例化路由

挂：挂载路由

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

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

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

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

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

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

  或this$routerpush({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中（AppVue）使用<router-view></router-view>

1问题描述

页面中需要路由匹配给当前路由高亮，所以就需要获取当前路由的path，但是发现获取不到

在 mounted 中打印 $route：

获取到的值不对。path 和 fullPath ，明明应该有值，但只有一个 "/" 。

可能在 mounted 中router 的初始化还没有完成，所以取到的是一个初始默认值。

加一个延时试试：

可以发现，有时能获取到，有时获取不到，延时到2000以后，目前测试的是都能获取到。

问题推测：

vue-router 初始化是需要一段时间的，在完成之前，取值只能拿到初始的默认值。

在 mounted 中 router 初始化可能还没有完成。

2用onReady解决

上面用定时器延迟了1000ms，有时能取到 router，于是加长延时时间到2000解决，但是，真正要解决这个问题，肯定不能用定时器，因为延迟的时间无法确定：

长了，影响体验

短了，可能router初始化还没完成

查阅官网API，希望官方提供了 初始化完成时的回调方法 ，果然找到了： onReady

经测试，通过。

replace和push区别：

routerpush(location) 会向 history 栈添加一个新的记录，当用户点击浏览器后退按钮时，则回到之前的 URL。

routerreplace(location) ，replace 属性（默认值: false），它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

注意：获取路由上面的参数，用的是$route，后面没有r

params是路由的一部分,必须要有。query是拼接在url后面的参数，没有也没关系。

params一旦设置在路由，params就是路由的一部分，如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容。

params、query不设置也可以传参，但是params不设置的时候，刷新页面或者返回参数会丢失。

两者都可以传递参数，区别是什么？

query 传参配置的是path，而params传参配置的是name，在params中配置path无效

query在路由配置不需要设置参数，而params必须设置

query传递的参数会显示在地址栏中

params传参刷新会无效，但是query会保存传递过来的值，刷新不变

以上就是关于vue路由router,routes,route全部的内容，包括:vue路由router,routes,route、Vue路由的使用、vue-router，路由按需加载，页面加载完成后，this.$route 获取不到等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！