Vue全家桶-前端路由

一、路由的基本概念与原理

1.路由:是一个比较广义和抽象的概念，路由的本质就是对应关系。

开发中，分为后端路由和前端路由。

①后端路由:根据不同的用户URL请求，返回不同的内容。

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

②SPA

后端路由渲染(存在性能问题)。

Ajax前端渲染(前端渲染提高性能，但是不支持浏览器的前进后退操作)。

SPA单页面应用程序:整个网站只有一个页面，内容的变化通过Ajax局部更新实现，同时支持浏览器地址栏的前进的后退操作。

SPA实现原理之一:基于URL地址的hash(hash的变化会导致浏览器记录访问历史的变化、hash的变化不会触发新的URL请求)。

在实现SPA过程中，最核心的技术点就是前端路由。

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

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

④实现简易前端路由

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

//监听window的onhashchange事件，根据获取得到的最新hash值，切换要显示的组件的名称

window.onhashchange = function () {

    //通过location.hash 获取到最新的hash值

}

2.Vue Router

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

它和vue.js的核心深度集成，可以非常方便的用于SPA应用程序的开发。

vue Router 包含功能有:

支持HTML5历史模式或hash模式

支持嵌套路由

支持路由参数

支持编程式路由

支持命名路由

二、vue-router的基本使用

1.基本使用步骤

①引入相关库文件

导入vue文件，为全局window对象vue构造函数

<script src="./lib/vue_2.5.22.js"></script>

导入vue-router文件，为全局window对象挂载VueRouter构造函数

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

②添加路由链接

router-link是vue中提供的标签，默认会被渲染为a标签

to属性默认会被渲染成href属性

to属性的默认值会被渲染成#开头的hash地址

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

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

③添加路由填充位

路由填充位，也叫路由占位符

将来通过路由规则匹配到的组件，将会被渲染到router-view所在的位置

<router-view></router-view>

④定义路由组件

var User = {

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

}

var Register = {

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

}

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

//创建路由实例对象

var Router = new VueRouter({

    //routes是路由规则数组

    routes:[

      //每个路由规则都是一个配置对象，其中至少包含path和component 两个属性:

    //  path表示当前路由规则匹配的 hash地址

    // component表示当前路由规则对应要展示的组件

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

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

    ]

})

⑥把路由挂载到Vue根实例中

new Vue({

    el: '#app',

    router

});

2.路由重定向

指的是用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面，通过路由规则的 redirect属性，指定一个新的路由地址，可以很方便的设置路由的重定向:

var router = new VueRouter({

    routes:[

      //其中path表示需要被重定向的原地址，redirect表示将要被重定向到的新地址

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

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

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

    ]

})

三、vue-router嵌套路由

1.嵌套路由用法

①嵌套路由功能分析

点击父级路由链接显示模板内容

模板内容中又有子级路由链接

点击子级路由链接显示子集模板内容

②父路由组件模板

父级路由链接

父组件路由填充位

<p>

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

    <router-link to="register">Register<router-link>

</p>

<div>

    控制组件的显示位置

    <routet-view><router-view>

</div>

③子级路由模板

子级路由链接

子集路由填充位

const Register = {

    template : `<div>

        <h1>Register 组件</h1>

        <hr/>

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

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

        子路由填充位置

        <router-view/>

    </div>`

}

④嵌套路由配置

父级路由通过children属性配置子集路由

const router = new VueRouter({

    routes:[

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

      {

        path:'/register',

        component: Register,

        //通过children属性，为/register添加子路由规则

        children : [

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

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

        ]

      }

    ]

})

四、vue-router动态路由匹配

1.动态匹配路由的基本用法

思考:

有如下三个路由链接

<router-link to="/user1">User1<router-link>

<router-link to="/user2">User2<router-link>

<router-link to="/user3">User3<router-link>

//定义如下三个对应的路由规则，是否可行?

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

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

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

应用场景:通过动态路由参数的模式进行路由匹配

var router = new VueRouter({

    routes: [

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

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

    ]

})

const User = {

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

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

}

2.路由组件传递参数

$routet与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由解耦。

①props的值是布尔类型

const router = new VueRouter({

    routes : [

      //如果props被设置为true,routet.params将会设置为组件属性

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

    ]

})

const User = {

    props:['id'],//使用props接收路由参数

    template : '<div>用户ID:  {{ id }}</div>' //使用路由参数

}

②props的值为对象类型

const router = new VueRouter({

    routes : [

      //如果props是一个对象,它会被按原样设置为组件属性

        {path:'/user/:id', component : User, props:{ uname:'li',age:20}}

    ]

})

const User = {

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

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

}

③props的值为函数类型

const router = new VueRouter({

    routes : [

      //如果props是一个函数，则这个函数接收router对象为自己的形参

        {path:'/user/:id',

          component : User,

          props: router => ({ uname:'zs', age: 20, id : router.params.id})}

    ]

})

const User = {

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

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

}

五、vue-router命名路由

1.命名路由的配置规则

为了更加方便的表示路由的路径，可以给路由规则起一个别名，即为'命名路由'。

const router = new VueRouter({

    routes : [

        {path:'/user/:id',

          name: :'user'

          component : User

        }

    ]

})

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

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

六、vue-router编程式导航

1.页面导航的两种方式

声明式导航:通过点击链接实现导航的方式。

例如:普通网页中的a链接，或者vue中的router-link标签

编程式导航:通过调用JavaScript形式的Api实现导航的方式

例如:普通网页中的location.href

编程式导航基本用法:

常用的编程式导航API如下

this.$router.push('hash地址')

this.$router.go(n)

const User ={

    template : '<div><button @click="goRegistet">跳转到注册页面</button></div>

    methods : {

        goRegister : function () {

          //用编程的方式控制路由跳转

          this.$router.push('/register');

        }

    }

}

2.编程式导航参数规则

router.push()方法的参数规则

//字符串(路径名称)

router.push('/home')

//对象

router.push({ path : '/home'})

//命名的路由(传递参数)

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

//带查询参数，变成/register?uname=lisi

router.push({ path : '/register', query : { uname : 'lisi'}})

七、基于vue-routet的案例

后台管理路由案例

用到的路由技术要点:

路由的基本用法，

嵌套路由，

路由重定向，

路由传参，

编程式导航