前端路由

1.路由基本概念和原理

（1）路由

本质：对应关系

• 后端路由：根据不同用户URL请求，返回不同内容

                本质：URL请求地址与服务器资源之间的对应关系

• 前端路由：根据不同的用户事件，显示不同的页面内容

               本质：用户事件与事件处理函数之间的对应关系

（2）实现简易前端路由

基于URL中的hash实现（点击菜单的时候改变URL的hash，根据hash的变化控制组件的切换）

（3）Vue Router

https://router.vuejs.org/zh/

功能：

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

2.vue-router的基本使用

（1）基本使用步骤

• 引入相关的库文件

<script src = "./lib/vue-2.5.22.js"></script>

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

• 添加路由连接

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

<router-link to = "/register">Resgister</router-link>

• 添加路由填充位

<router-view></router-view>

• 定义路由组件

var User = {

  template: '<div>User</div>'

}

var Register = {

  template: '<div>Register</div>'

}

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

var router = new VueRouter({

  router: [

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

        {path: '/register', component:Register}

   ]         //path表示当前路由规则匹配的hash地址，component表示当前路由规则对应要展示的组件

})

• 把路由挂载到vue根实例中

new Vue({

     el: '#app',

     router            //为了能够让路由规则生效，必须把路由有对象挂载到vue实例对象上

})

（2）路由重定向

用户在访问地址A时，强制用户跳转到地址C，从而展示特定组件页面

通过路由规则的redirect属性，指定一个新的路由地址

{path:'/', redirect:'/user'}

3.vue-router嵌套路由

（1）用法

const Register = {

  template: '<div>

              <h1>Register组件</h1>

              <hr/>

              <router-link to="/register/tab1">Tab1</router-link>

              <router-link to="/register/tab2">Tab2</router-link>

              //子路由填充位置

              <router-view/>

              </div>'

}

const router = new VueRouter({

     router: [

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

           {

             path: '/register',

             component: Register,

              children: [

                    {path:'/register/tab1', component:Tab1},

                    {path:'/register/tab2', component:Tab2}

             ]

          }

    ]

})

4.动态路由

（1）用法

var router = new VueRouter({

    router: [

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

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

})

const User = {

      template: '<div>User{{$router.oarams.id}}</div>'

}       //路由组件中通过$router.params获取路由参数

（2）路由组件传参

• props的值为布尔类型

const router = new VueRouter({

   router: [

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

     ]

})

const User = {

    props:['id'],

    template:'<div>用户ID：{{id}}</div>'

}

• props的值为对象类型

const router = new VueRouter({

      router:[

           {path:'/user/:id', component:User, props:{uname:'off', age:30}}

       ]

})

const User = {

   props:['uname', 'age'],

   template:'<div>用户信息:{{uname + '---' +age}}</div>'

}

• props的值为函数类型

const router = new VueRouter({

     router: [

          {path: '/user/:id',

           component: User,

           props: route => ({uname:'tay', age: 30, id:route,params:id})}

      ]

})

const User = {

 props:['uname', 'age', 'id'],

template:'<div>用户信息：{{uname + '---' + age + '---' + id}}</div>'

}

5.Vue-router命名路由

给路由规则起一个别名

const router = new VueRouter({

    router: [

           {

             path: '/user/:id'

             name: 'user',

             component: User

           }

      ]

})

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

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