Vue-Router路由

路由的基本概念与原理

后端路由

• 概念：
• 本质：
• SPA单页面应用程序

前端路由

• 概念：根据不同的用户事件，显示不同的页面内容
• 本质：用户事件与事件处理函数之间的对应关系

Vue Router的使用步骤(★★★)

是 Vue.js 官方的路由器管理。

基本使用步骤：

A.导入js文件

<script src="lib/vue_2.5.22.js"></script>
<script src="lib/vue-router_3.0.2.js"></script>

B.添加路由链接:

是路由中提供的标签，默认会被渲染为a标签，to属性默认被渲染为href属性，
to属性的值会被渲染为#开头的hash地址

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

C.添加路由填充位（路由占位符）

<router-view></router-view>

D.定义路由组件

var User = { template:"<div>This is User</div>" }
var Login = { template:"<div>This is Login</div>" }

E.配置路由规则并创建路由实例

• 每一个路由规则都是一个对象，对象中至少包含path和component两个属性
• path表示 路由匹配的hash地址，component表示路由规则对应要展示的组件对象
• path设置为/表示页面最初始的地址 / , redirect表示要被重定向的新地址，设置为一个路由即可

var myRouter = new VueRouter({
    //routes是路由规则数组
    routes:[
        //每一个路由规则都是一个对象，对象中至少包含path和component两个属性
        //path表示  路由匹配的hash地址，component表示路由规则对应要展示的组件对象
        { path:"/",redirect:"/user"}, //重定向
        {path:"/user",component:User},
        {path:"/login",component:Login}
    ]
})

F.将路由挂载到Vue实例中

new Vue({
    el:"#app",
    //通过router属性挂载路由对象
    router:myRouter
})

嵌套路由，动态路由的实现方式

A.嵌套路由的概念(★★★)

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 Tab1 = {
        template: '<h3>tab1 子组件</h3>'
      }

      const Tab2 = {
        template: '<h3>tab2 子组件</h3>'
      }

      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user'},
          { path: '/user', component: User },
          // children 数组表示子路由规则
          { path: '/register', component: Register, children: [
            { path: '/register', redirect:'/register/tab1' },//重定向
            { path: '/register/tab1', component: Tab1 },
            { path: '/register/tab2', component: Tab2 }
          ] }
        ]
      })

B.动态路由匹配(★★★)

var User = { template:"<div>用户：{{$route.params.id}}</div>"}

var myRouter = new VueRouter({
    //routes是路由规则数组
    routes: [
        //通过/:参数名  的形式传递参数 
        { path: "/user/:id", component: User },

补充：

如果使用$route.params.id来获取路径传参的数据不够灵活。

1. 我们可以通过props来接收参数

var User = { 
    props:["id"],
    template:"<div>用户：{{id}}</div>"
    }

var myRouter = new VueRouter({
    //routes是路由规则数组
    routes: [
        //通过/:参数名  的形式传递参数 
        //如果props设置为true，route.params将会被设置为组件属性
        { path: "/user/:id", component: User,props:true },

2. 还有一种情况，我们可以将props设置为对象，那么就直接将对象的数据传递给
   组件进行使用

var User = { 
    props:["username","pwd"],
    template:"<div>用户：{{username}}---{{pwd}}</div>"
    }

var myRouter = new VueRouter({
    //routes是路由规则数组
    routes: [
        //通过/:参数名  的形式传递参数 
        //如果props设置为对象，则传递的是对象中的数据给组件
        { path: "/user/:id", component: User,props:{username:"jack",pwd:123} },

3. 如果想要获取传递的参数值还想要获取传递的对象数据，那么props应该设置为
   函数形式。

var User = { 
       props:["username","pwd","id"],
       template:"<div>用户：{{id}} -> {{username}}---{{pwd}}</div>"
       }

   var myRouter = new VueRouter({
       //routes是路由规则数组
       routes: [
           //通过/:参数名  的形式传递参数 
           //如果props设置为函数，则通过函数的第一个参数获取路由对象
           //并可以通过路由对象的params属性获取传递的参数
           //
           { path: "/user/:id", component: User,props:(route)=>{
               return {username:"jack",pwd:123,id:route.params.id}
               } 
           },

命名路由以及编程式导航

A.命名路由：给路由取别名

案例：

var myRouter = new VueRouter({
    //routes是路由规则数组
    routes: [
        //通过name属性为路由添加一个别名
        { path: "/user/:id", component: User, name:"user"},

//添加了别名之后，可以使用别名进行跳转
<router-link to="/user">User</router-link>
<router-link :to="{ name:'user' , params: {id:123} }">User</router-link>

//还可以编程式导航
myRouter.push( { name:'user' , params: {id:123} } )

B.编程式导航(★★★)

页面导航的两种方式：
A.声明式导航：通过点击链接的方式实现的导航
B.编程式导航：调用js的api方法实现导航

Vue-Router中常见的导航方式：
this.$$router.push("hash地址");
this.$router.push("/login");
this.$router.push({ name:'user' , params: {id:123} });
this.$router.push({ path:"/login" });
this.$router.push({ path:"/login",query:{username:"jack"} });

this.$为数字，参考router.go( n );//n为数字，参考history.go
this.$router.go( -1 );