前端路由之vue-router

标题1 路由的基本知识

1. 路由的本质就是对应关系，比如URL地址个真实资源之间就有一种对应关系，就称为路由。路由分为前端路由和后端路由

• 后端路由是由服务器端进行实现的，并完成资源的分发
• 前端路由是依靠hash值，也就是锚点链接的变化进行实现的。简单来说就是事件与事件处理函数之间的对应关系
  总结：后端路由就是url与后端资源的一一对应关系。前端路由就是用户事件与事件处理函数一一对应关系。

标题2 vue官方提供的前端路由vue-router

1. Vue Router的特性

• 支持H5历史模式或者hash模式
• 支持嵌套路由
• 支持路由参数
• 支持编程式路由
• 支持命名路由

2. 基本使用步骤

• 2.1导入相关的js文件

<script src="/vue"></script>//先导入vue
<script src="/vue-router"></script>//再导入vue-router

• 2.2添加路由链接，这是由vue提供的标签，默认会被渲染成a标签，里面的to属性相当于a标签的href属性

<router-link to="/user">User</router-link>

• 2.3 添加路由占位符（最后路由展示的组件就会再占位符的位置展示）

<router-view></router-view>
//简写形式
<router-view/>

• 2.4 定义路由组件

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

• 2.5 创建路由实例，并配置路由规则🍀

//创建路由实例对象
var router=new VueRouter({
//routes是路由规则数组，里面对象形式至少要有path和component两个属性
routes:[{path:'/user',component:User}]
//path表示当前路由规则的hash地址，和<router-link>的to属性要保持一致
//component表示定义的组件名称
})

• 2.6 将路由挂载到Vue实例中

new Vue({
el:'#app',
router,//是router:router的简写，router表示定义路由实例对象的名称
})

3. redirect路由重定向
   概念：用户在访问地址A的时候，强制用户跳转到地址B，从而展示特定的组件页面

• 使用：在定义想要重定向的路由规则时，添加属性redirect属性

{path:'/',redirect:'/user'}//path表示需要被重定向的原地址，redirect表示将要被重定向的新地址

标题 3 vue-router嵌套路由

1. 通过嵌套路由，可以处理更加复杂的界面。父级路由里面嵌套子级路由
2. 主要的思路：在父级路由的模板中定义全新的子级vue-router，也就是在父级路由模板中重新写一遍基本步骤，在定义子级路由规则的时候需要在父级路由规则中，添加children属性进行配置，children属性 是一个数组。

• 2.1父级模板中定义子级的路由链接和路由占位符

//父级模板
const Register={
template:`
<div>
<h1>Register父级模板</h1>
<hr>
<-- 嵌套路由的路由链接（子级路由链接）-->
<router-link to="/register/son">Son</router-link>
<-- 子级路由填充位置-->
<router-view></router-view>
</div>
`
}

在template添加路由链接，子级的url是以父级路由/register开头

• 2.2 定义子级的组件

const Son={
template:'<h3>Son</h3>'
}

• 2.3 在父级路由规则中，添加children属性

const router=new VueRouter({
routes:[
//父级路由规则
{path:'/register',
component:Register,
//子级路由规则
children:[
{path:'/register/son',component:Son}
]}
]
})

总结：关于router-view和router-link的书写位置：路由规则在哪定义，router-view和router-link就写在谁的模板中路由规则在哪定义的，决定了自己的父组件是谁，那么子组件的router-view和router-link就定义在父组件的模板中

标题 4 动态路由匹配

1. 动态路由匹配
   实现的功能：点击不同的用户链接，显示对应的用户信息
   实现步骤：匹配规则定义时，动态路由语法为：参数名，以冒号开头，就代表是动态匹配

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

路由组件定义时，获取路由参数为：{{$router.params.参数名}}

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

Vue实例的属性，都是$开头的，比如‘$el`

2. 路由组件传递参数，主要通过props属性

• 2.1 传递动态参数，props的值是布尔值

//1.路由定义规则中，props:true代表给动态参数id，开启props传参
const router=new VueRouter({
routes:[
{path:'/user/:id',component:User,props:true}
]
})
//2.路由组件中 通过props属性接收传过来的参数
const User={
props:['id']//类似于父组件向子组件传值，子组件接收值
template:'<div>User {{id}}</div>'
}

• 2.2 props的值是对象类型，传递静态参数
  这种情况下，以：冒号开头的动态参数就不能获取到

//1.路由规则中，通过给props声明对象，进行传参
const router=new VueRouter({
routes:[
  { path: '/user/:id', component: User, props: { uname: 'lisi', age: 20 } },
]
})
//2.路由组件中，props数据接收参数
 const User = {
        props: ['id', 'uname', 'age'],
        //这个id其实是拿不到值的，只能通过props为true才能获取到
        template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>'
      }

• 2.3 props的值是函数类型， 既能获取动态参数id，又能获取静态参数。
  箭头函数返回了一个对象，对象中的数据，就是要传递的数据

  const router = new VueRouter({
        // 所有的路由规则
        routes: [
          {
            path: '/user/:id',
            component: User,
            props: route => ({ uname: 'zs', age: 20, id: route.params.id })
            //router是箭头函数的形参，系统在调用时会将$route传递进去
            //id是通过route.params.id动态获取到id参数的值
          }
        ]
      })

这样的话，动态参数id能获取，静态参数也能获取

标题 5 vue-router命名路由

1. 概念：就是给路由规则起一个别名，在书写路由链接的时候就不用写具体的path路由，可以写这个别名
2. 使用方法：

• 在路由规则中通过name属性进行定义

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

• 路由链接中，需要通过属性绑定的形式绑定to属性直接使用name属性的值

<router-link :to="{name:'user',params:{id:123}}">User<router-link>
//这是需要传递参数的形式

标题 6 vue-router编程式导航

1. 页面导航的两种方式：

• 声明式导航：通过点击链接的方式实现导航的方式，例如普通网页中的a链接或者vue中的
• 编程式导航：通过调用JavaScript形式的API实现导航，例如普通网页中的location.href

2. 常用的编程式导航

• push(‘hash地址’)：跳转锚点页面
• go(n)：前进后退几个页面，参数n一个数字，代表前进后退n个页面

 const User = {
        props: ['id', 'uname', 'age'],
        template: `<div>
          <h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>
          <button @click="goRegister">跳转到注册页面</button>
        </div>`,
        methods: {
          goRegister() {
            this.$router.push('/register')//跳转到注册页面（锚点），可以看下效果
          }
        },
      }
        const Register = {
        template: `<div>
          <h1>Register 组件</h1>
          <button @click="goBack">后退</button>
        </div>`,
        methods: {
          goBack() {
            this.$router.go(-1)//-1：后退1个界面
          }
        }
      }