router vue 多个路径_vue-router 路由 总结

vue.js 路由基础

安装vue - router

直接下载 / CDN

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

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

NPM

npm install vue-router

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：

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 在哪里渲染它们。

JavaScript

1创建组件：创建单页面应用需要渲染的组件

2创建路由：创建VueRouter实例

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

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

HTML

使用v-link指令

使用标签

router.redirect

应用在首次运行时右侧是一片空白，应用通常都会有一个首页，例如：Home页。

使用router.redirect方法将根路径重定向到/home路径：

router.redirect({

'/': '/home'

})

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

动态路由的匹配

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

const User = {

template: '

User

'

}

const router = new VueRouter({

routes: [

// 动态路径参数 以冒号开头

{ path: '/user/:id', component: User }

]

})

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

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

const User = {

template: '

User {{ $route.params.id }}

'

}

你可以在一个路由中设置多段『路径参数』，对应的值都会设置到 $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访问一些内容，一个路径映射一个组件，访问这两个路径也会分别渲染两个组件。

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

在组件内部使用标签

在路由器对象中给组件定义子路由

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

接着上节创建的 app：

const User = {

template: '

User {{ $route.params.id }}

'

}

const router = new VueRouter({

routes: [

{ path: '/user/:id', component: User }

]

})

这里的 是最顶层的出口，渲染最高级路由匹配到的组件。同样地，一个被渲染组件同样可以包含自己的嵌套 。例如，在 User 组件的模板添加一个 ：

const User = {

template: `

User {{ $route.params.id }}

}

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

const router = new VueRouter({

routes: [

{ path: '/user/:id', component: User,

children: [

{

// 当 /user/:id/profile 匹配成功，

// UserProfile 会被渲染在 User 的 中

path: 'profile',

component: UserProfile

},

{

// 当 /user/:id/posts 匹配成功

// UserPosts 会被渲染在 User 的 中

path: 'posts',

component: UserPosts

}

]

}

]

})

编程式的导航

除了使用router-link创建标签a还可以通过router的实例方法，通过编码来实现.

以下两种方式都可以创建一个a标签:

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.replace(...)

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

命名路由

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

const router = new VueRouter({

routes: [

{

path: '/user/:userId',

name: 'user',

component: User

}

]

})

要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象：

User

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

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

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

命名视图

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

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 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) 来取消导航。

路由元信息

首页

关于我们

账户中心

密码管理

登录

var Foo = {

template:"

我是首页

"

}

var Bar = {

template:"

我是关于我们

"

}

var User = {

template:"

我是账户中心

"

}

var Pwd = {

template:"

我是密码

"

}

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

}

}

});