vue-router 路由总结

时间 2019-12-06

标签 vue router 路由总结栏目系统网络繁體版

原文原文链接

vue.js 路由基础

安装vue - router

直接下载 / CDN

https://unpkg.com/vue-router/...html

Unpkg.com 提供了基于 NPM 的 CDN 连接。上面的连接会一直指向在 NPM 发布的最新版本。你也能够像 https://unpkg.com/vue-router@... 这样指定版本号或者 Tag。vue

在 Vue 后面加载 vue-router，它会自动安装的：vue-router

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>

NPM

npm install vue-router

若是在一个模块化工程中使用它，必需要经过 Vue.use() 明确地安装路由功能：npm

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

若是使用全局的 script 标签，则无须如此（手动安装）。编程

Getting Started

教程中的案例代码将使用 ES2015 来编写。浏览器

用 Vue.js + vue-router 建立单页应用，是很是简单的。使用 Vue.js ，咱们已经能够经过组合组件来组成应用程序，当你要把 vue-router 添加进来，咱们须要作的是，将组件(components)映射到路由(routes)，而后告诉 vue-router 在哪里渲染它们。app

JavaScript

1建立组件：建立单页面应用须要渲染的组件

2建立路由：建立VueRouter实例

3映射路由：调用VueRouter实例的map方法

4启动路由：调用VueRouter实例的start方法

HTML

使用v-link指令

使用<router-view>标签

router.redirect

应用在首次运行时右侧是一片空白，应用一般都会有一个首页，例如：Home页。
使用router.redirect方法将根路径重定向到/home路径：ide

router.redirect({

    '/': '/home'
    
})

router.redirect方法用于为路由器定义全局的重定向规则，全局的重定向会在匹配当前路径以前执行。模块化

动态路由的匹配

咱们常常须要把某种模式匹配到的全部路由，全都映射到同个组件。例如，咱们有一个 User 组件，对于全部 ID 各不相同的用户，都要使用这个组件来渲染。那么，咱们能够在 vue-router 的路由路径中使用『动态路径参数』（dynamic segment）来达到这个效果：布局

const User = {
  template: '<div>User</div>'
}

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

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

一个『路径参数』使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，能够在每一个组件内使用。因而，咱们能够更新 User 的模板，输出当前用户的 ID：

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

你能够在一个路由中设置多段『路径参数』，对应的值都会设置到 $route.params 中。例如：

模式	匹配路径	$route.params
/user/:username	/user/evan	{ username: 'evan' }
/user/:username/post/:post_id	/user/evan/post/123	{ username: 'evan', post_id: 123 }

除了 $route.params 外，$route 对象还提供了其它有用的信息，例如，$route.query（若是 URL 中有查询参数）、$route.hash 等等。你能够查看 API 文档的详细说明。

响应路由参数的变化

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

复用组件时，想对路由参数的变化做出响应的话，你能够简单地 watch（监测变化） $route 对象：

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 对路由变化做出响应...
    }
  }
}

高级匹配模式

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

嵌套路由

嵌套路由是个常见的需求，假设用户可以经过路径/home/news和/home/message访问一些内容，一个路径映射一个组件，访问这两个路径也会分别渲染两个组件。

实现嵌套路由有两个要点：

在组件内部使用<router-view>标签
在路由器对象中给组件定义子路由

借助 vue-router，使用嵌套路由配置，就能够很简单地表达这种关系。

接着上节建立的 app：

<div id="app">
  <router-view></router-view>
</div>
const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

这里的 <router-view> 是最顶层的出口，渲染最高级路由匹配到的组件。一样地，一个被渲染组件一样能够包含本身的嵌套 <router-view>。例如，在 User 组件的模板添加一个 <router-view>：

const User = {
  template: `
    <div class="user">
          <h2>User {{ $route.params.id }}</h2>
          <router-view></router-view>
    </div>
}

要在嵌套的出口中渲染组件，须要在 VueRouter 的参数中使用 children 配置：

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

编程式的导航

除了使用router-link建立标签a还能够经过router的实例方法，经过编码来实现.

如下两种方式均可以建立一个a标签:

<router-link to="...">
or

router.push(...)

router.push向history栈中添加一条数据，用户点击back时，回到原来的url

push有如下用法：

router.push('home') //参数为字符串
router.push({path:'home'}) //参数为对象
router.push({name:'user',params:{userId:123}})//参数为命名的路由
// 带查询参数，变成 /register?plan=private
router.push({path:'register',query:{plan:'private'}})

router.replace(location) 跟 router.push 很像，惟一的不一样就是，它不会向 history 添加新记录，而是跟它的方法名同样 —— 替换掉当前的 history 记录。

<router-link to="..." replace>  router.replace(...)

router.go(n) 方法的参数是一个整数，在 history 记录中向前或者后退多少步

命名路由

有时候，经过一个名称来标识一个路由显得更方便一些，特别是在连接一个路由，或者是执行一些跳转的时候。你能够在建立 Router 实例的时候，在 routes 配置中给某个路由设置名称。

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

要连接到一个命名路由，能够给 router-link 的 to 属性传一个对象：

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

这跟代码调用 router.push() 是一回事：

router.push({ name: 'user', params: { userId: 123 }})

这两种方式都会把路由导航到 /user/123 路径。

命名视图

有时候想同时（同级）展现多个视图，而不是嵌套展现，例如建立一个布局，有 sidebar（侧导航）和 main（主内容）两个视图，这个时候命名视图就派上用场了。你能够在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。若是 router-view 没有设置名字，那么默认为 default。

<router-view class="view one"></router-view>

<router-view class="view two" name="a"></router-view>

<router-view class="view three" name="b"></router-view>

一个视图使用一个组件渲染，所以对于同个路由，多个视图就须要多个组件。确保正确使用 components 配置（带上 s）：

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

重定向和别名

重定向

重定向也是经过 routes 配置来完成，下面例子是从 /a 重定向到 /b：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

重定向的目标也能够是一个命名的路由：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

甚至是一个方法，动态返回重定向目标：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // 方法接收 目标路由 做为参数
      // return 重定向的 字符串路径/路径对象
    }}
  ]
})

别名

『重定向』的意思是，当用户访问 /a时，URL 将会被替换成 /b，而后匹配路由为 /b，那么『别名』又是什么呢？

/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，可是路由匹配则为 /a，就像用户访问 /a 同样。

上面对应的路由配置为：

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

『别名』的功能让你能够自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构。

HTML5 History 模式

项目中我用的是history模式。

默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，因而当 URL 改变时，页面不会从新加载。

若是不想要很丑的 hash，咱们能够用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须从新加载页面。

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！

不过这种模式要玩好，还须要后台配置支持。由于咱们的应用是个单页客户端应用，若是后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就很差看了。

因此呢，你要在服务端增长一个覆盖全部状况的候选资源：若是 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

导航钩子

vue-router 提供的导航钩子主要用来拦截导航，让它完成跳转或取消。有多种方式能够在路由导航发生时执行钩子：全局的, 单个路由独享的, 或者组件级的。

全局钩子

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
    // do something 
    next();
});

router.afterEach((to, from, next) => {
    console.log(to.path);
});

每一个钩子方法接收三个参数：

to: Route : 即将要进入的目标 [路由对象]
from: Route : 当前导航正要离开的路由
next: Function : 必定要调用该方法来 resolve 这个钩子。执行效果依赖 next方法的调用参数。

next(): 进行管道中的下一个钩子。若是所有钩子执行完了，则导航的状态就是confirmed （确认的）。

next(false): 中断当前的导航。若是浏览器的 URL 改变了（多是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from路由对应的地址。

next('/') 或者 next({ path: '/' }): 跳转到一个不一样的地址。当前的导航被中断，而后进行一个新的导航。

确保要调用 next方法，不然钩子就不会被 resolved。

组件内的钩子

你能够在路由组件内直接定义如下路由导航钩子：

beforeRouteEnter

beforeRouteUpdate (2.2 新增)

beforeRouteLeave

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 由于当钩子执行前，组件实例还没被建立
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，可是该组件被复用时调用
    // 举例来讲，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 因为会渲染一样的 Foo 组件，所以组件实例会被复用。而这个钩子就会在这个状况下被调用。
    // 能够访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 能够访问组件实例 `this`
  }
}

beforeRouteEnter 钩子不能访问 this，由于钩子在导航确认前被调用,所以即将登场的新组件还没被建立。

不过，你能够经过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，而且把组件实例做为回调方法的参数。

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 经过 `vm` 访问组件实例
  })
}

你能够在 beforeRouteLeave 中直接访问 this。这个 leave 钩子一般用来禁止用户在还未保存修改前忽然离开。能够经过 next(false) 来取消导航。

路由元信息

<div id="app">
        <p>
            <router-link to="/foo">首页</router-link>
            <router-link to="/bar">关于咱们</router-link>
            <router-link to="/user">帐户中心</router-link>
            <router-link to="/user/pwd">密码管理</router-link>
            <router-link to="/login">登陆</router-link>
            <input type="button" value="logout" @click="logout">
        </p>
        <router-view></router-view>
    </div>
    <template id="logintpl">
        <div>
            <input type="button" value="login" @click="login">
        </div> 
    </template>
    <script>
        var Foo = {
            template:"<div>我是首页</div>"
        }
        var Bar = {
            template:"<div>我是关于咱们</div>"
        }
        var User = {
            template:"<div>我是帐户中心<router-view></router-view></div>"
        }
        var Pwd = {
            template:"<div>我是密码</div>"
        }
    
        var routes = [
            //我是首页
            {path:"/foo" , component:Foo},
            //我是关于咱们
            {path:"/bar" , component:Bar},
            //我是帐户中心
            {
                path:"/user" , 
                meta:{requireLogin:true},
                component:User,
                children:[
                    {
                        //我是密码
                        path:"pwd" , 
                        meta:{requireLogin:true},
                        component:Pwd
                    }
                ]
            },
        
            //我是登陆
            {
                path:"/login" , 
                component:{
                    template:"#logintpl",
                    methods:{
                        login:function(){
                            isLogin = true
                        }
                    }
                }
                
            }
        ]
        var router = new VueRouter({
            routes
        })
        var isLogin = true ;
        router.beforeEach((to, from, next) => {
            if(to.meta.requireLogin&&!isLogin){
                next("/login")
            }else{
                next();
            }
        })
    
        var app = new Vue({
            el:"#app",
            router,
            methods:{
                logout:function(){
                    isLogin = false
                }
            }
        });
    </script>

vue-router 路由 总结