脚本宝典收集整理的这篇文章主要介绍了Vue之路由，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

Vue路由

路由的安装

构建开发版

git clone https://github.com/vuejs/vue-... node_modules/vue-router
cd node_modules/vue-router
npm install
npm run build

路由基础

<router-link to>与A标签相似
.router-link-active 当 <router-link> 对应的路由匹配成功，将自动设置 class 属性值

动态路由匹配

用：id 匹配
一个『路径参数』使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。
$$route.query匹配？后的值

匹配优先级

匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高

嵌套路由

在创建一个字节点
==注意==：定义子节点时父节点中添加
<router-view></router-view>

命名路由与命名视图

都是用name：来命名
命名路由后引用应用

<router-link :to="{ name: 'user',  }}">User</router-link>

命名视图
为了能引用专门的路由

<router-vi
ew class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
<script>

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

</script>

编程式的导航

• router.push(location)
  想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
• router.replace(location)它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录

重定向 (redirect)和 别名(alias)

导航钩子

全局钩子

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

to: Route: 即将要进入的目标 路由对象

from: Route: 当前导航正要离开的路由

next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

路由元信息

定义路由的时候可以配置 meta 字段：
meta.requireLogin
http://git.oschina.net/hxj886...
http://git.oschina.net/hxj886...
http://git.oschina.net/hxj886...

脚本宝典总结

以上是脚本宝典为你收集整理的Vue之路由全部内容，希望文章能够帮你解决Vue之路由所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。