饿了么慕课网学习手记（一）Vue-router

1.安装

直接引入

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

npm下载

npm install vue-router

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

import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)

2.使用

在router下的js文件中

export default new Router({
routes: [path: '/',component: View]
})

饿了么中路由实例

3.嵌套路由

实际生活中的应用界面，通常由多层嵌套的组件组合而成。嵌套路由即是在原路由中加一个children属性，children可以是一个数组，存放这个父路由的所有子路由；也可以是一个路由文件，文件中存放的路由都该路由的子路由

上图中HomePage为父路由组件，children中的路由为该路由的子路由，子路由中的组件会展示在父组件中（父组件中需要用<router-view></router-view>来渲染子路由中的组件）

使用<router-link></router-link>来切换路由

4.动态匹配路由

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

{path:"/seller:id",//通过不同的id来使不同的商家都使用同一个组件，id可传可不传component: Seller,
}

5.命名路由

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

{path:"/seller:id",//通过不同的id来使不同的商家都使用同一个组件，id可传可不传name: seller,component: Seller,
}

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

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

6.命名视图

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

<router-view></router-view>
<router-view></router-view>

每个路由都被渲染了两次

<router-view name='sidebar'></router-view>
<router-view name='main'></router-view>

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置 (带上 s)：

routes: [{path: '/',components: {default: Main,sidebar: Sidebar,main: Main}}
]

7.重定向和别名

重定向
重定向(Redirect)就是通过各种方法将各种网络请求重新定个方向转到其它位置,用于网站调整或网页被移到一个新地址,它也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b：

routes: [{ path: '/a', redirect: '/b' }
]

别名

/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。简单的说就是给 /a 起了一个外号叫做 /b ,但是本质上还是 /a

上面对应的路由配置为：

routes: [{ path: '/a', component: A, alias: '/b' }
]

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

8.编程式导航

除了使用创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现

router.push('/');//字符串
router.push({path: '/'});//对象
router.push({name: 'homePage',params: {id: '123'}})//命名路由

#router.replace()与router.push()类似，但router.push()会像history栈添加记录，可以通过router.go(n)来向前和向后多少步来切换路由，router.replace()不会

9.路由组件传参

布尔模式
如果 props 被设置为 true，route.params 将会被设置为组件属性

routes: [{ path: '/user/:id', component: User, props: true }
]

对象模式
如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用

routes: [{ path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } }
]

函数模式
你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等

routes: [{ path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) }
]

#<router-link></router-link>也可以传递参数，子组件使用props接收

<router-link :seller='seller'></router-link>