路由

一、路由

路由的本质就是对应关系。

前端路由：根据不同的用户事件显示不同的页面内容，其本质就是用户事件与事件处理函数之间的对应关系。

Vue Router 是vue.js的路由管理器。

vue特点：单页面应用(SPA），入口文件只有一个。

SPA原理：基于URL地址的hash（锚链接）。

　　window.onhashchange = function() {

　　　　通过location.hash获取最新hash值

　　}

路由切换：改变url的指向。

组件切换：只改变内容，不改变地址。

1. 路由的使用：

　　- npm i vue-router --save

　　- 在main.js中引入:

　　　　- import Vue from 'vue'

　　　　- import Router from 'vue-router'

　　　　- Vue.use(Router)

　　- 挂载在Vue实例上:

　　　　- newVue（{

　　　　　　router,

　　　　}）

　　- 路由出口（路由填充位，路由占位符）：

　　　　<router-view></router-view>

　

2. 路由的嵌套

一级路由：直接通过routes：[{path:'/index'}] 一级路由需要添加/

二级路由：在一级里面里面增加children：[{path:'man'}] 二级路由不需要添加/

export default new Router({
　　routes: [
　　// 一级路由
　　{
　　　　path: '/',
　　　　component: login
　　},
　　{
　　　　path: '/index',
　　　　component: index,
　　　　// 二级路由
　　　　children:[
　　　　{
　　　　　　path:'children',
　　　　　　component:children
　　　　},
　　　　{
　　　　　　path:'man',
　　　　　　component:man
　　　　}，

　　　　// 二级路由的重定向

　　　　{
　　　　　　path:'',
　　　　　　redirect:'woman'
　　　　},

　　　　]
　　}，

　　// 一级路由的重定向

　　{
　　　　path:'*',
　　　　redirect:'login'
　　}

　　]
})

 

3. 编程式导航

- 1. this.$router.push() 

配置的所有路由信息都在router里面---this.$router

具体的路由信息---this.$route，比如获取路径: this.$route.path

 this.$router.push() 会向history栈添加一个新的记录，当用户点击浏览器后退按钮时，会回到之前的URL。

使用方法：

　　- 字符串：  this.$router.push('home')

　　- 对象：  this.$router.push({ path: 'home' })

　　- 命名路由：  this.$router.push({ name: 'user', params: { userid: 123 } })

　　- 带查询参数：  this.$router.push( { path: 'register', query: { plan: 'private' } } )

- 2. this.$router.replace()

不会向history添加新纪录，而是替换当前的history记录。

应用场景；比如支付页面。支付成功之后不能返回支付页面,需要销毁这个当前支付的这个路由页面。

- 3. this.$router.go()

等同于 history.forword()

 

4. 动态路由

把某种模式匹配到的所有路由全部映射到同个组件。在路由路径中使用 “动态路径参数”。

const router = new Router({

　　{

　　　　path: ' /user/:id',

　　　　component: User

　　}

})

冒号传参，其参数值会被设置到 this.$router.params 中，可在每个组件中使用。

当使用路由参数时，如从/user/1导航到 /user/2，原来的组件实例会被复用。因为两个路由都渲染同一个组件，比起销毁再创建，复用更高效。不过也意味着 组件的生命周期钩子不会再被调用。

复用组件时，如需对路由参数的变化做出响应，可用 watch检测变化 $route 对象 或使用 beforeRouteUpdate 导航守卫。

const User = {

　　template: '...',

　　watch: {

　　　　'$route' (to, from) {

　　　　　　// 对路由变化做出响应

　　　　}

　　}

　　// 或

　　beforeRouteUpdate (to, from, next) {

　　　　// 对路由变化做出响应

　　}

} 

 

5. 路由问号传参

<router-link  :to="'/foodDetail?id='+item.id"  v-for='item in arr' :key='item.id' tag='li'></routeer-link>

其参数值会被设置到 this.$router.query中。

 

6. 路由模式

mode: 'history'

history模式不带#号，

默认hash，带#号，匹配性更好。

 

7. 路由组件传参-props解耦方式

在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。

使用 props 将组件和路由解耦：

const User = {

　　props: ['id'],

　　template: '<div>User {{ id }}</div>'

}

const router = new VueRouter({

　　routes: [

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

　　　　// 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：

　　　　{

　　　　　　path: '/user/:id',

　　　　　　components: { default: User, sidebar: Sidebar },

　　　　　　props: { default: true, sidebar: false }

　　　　}

})

　　- 1. 布尔值： props: true, 

　　　　接收参数： props: ['']

　　- 2. 对象： props: {uname: 'lili', age: 12 }

　　　　接收参数： props: [ 'uname', 'age' ]

　　- 3. 函数： props: route => { ... , id: route.params.id }

　　　　接收参数： props: [ ..., 'id' ]

 

8. 路由导航守卫

1. 全局守卫：

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

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

2. 路由独享守卫：

beforeEnter(to, from, next) => { }

3. 组件内守卫：

beforeRouteEnter(to, from, next) => { }

boforeRouteLeave(to, from, next) => { }

beforeRouteUpdate(to, from, next) => { }

 

9. 路由懒加载

// 方式一：

const login = () => Promise.resolve(import('../components/login/login'))

// 方式二：

const login = () => import('../components/login/login')

 

10. 命名路由与路由别名

{
　　path:'home',
　　// 命名路由
　　name:'首页',
　　component:home,
　　// 路由别名
　　alias:'/h'
},