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...