Vue基础——Vue前端路由

目标：
　　能够说出路由的概念
　　能够说出Vue-router的基本使用步骤
　　能够说出Vue-router的嵌套路由用法
　　能够说出Vue-router动态路由匹配用法
　　能够说出Vue-router命名路由用法
　　能够说出Vue-router编程式导航用法
　　能够基于路由的方式实现业务功能
目录：
　　路由的基本概念与原理
　　vue-router的基本使用
　　vue-router嵌套路由
　　vue-router动态路由匹配
　　vue-router命名路由
　　vue-router编程式导航
　　基于vue-router的案例
1、路由的基本概念与原理
1.1、路由
路由是一个比较广义和抽象的概念，路由的本质就是对应关系
在开发中，路由分为：
　　后端路由
　　前端路由
　　后端路由
　　　　概念：根据不同的用户URL请求，返回不同的内容
　　　　本质：URL请求地址与服务器资源之间的对应关系
　　SPA(Single Page Application)
　　　　后端渲染（存在性能问题）
　　　　Ajax前端渲染(前端渲染提高性能，但是不支持浏览器的前进后退操作）
　　　　SPA单页面应用程序：整个网站之后一个页面，内容的变化通过Ajax局部更新实现，同时支持浏览器地址的前进后退操作
　　　　SPA实现原理之一：基于URL地址的hash（hash的变化会导致浏览器记录访问历史的变化，但是hash的变化不会触发新的URL请求）
　　　　在实现SPA过程中，最核心的技术就是前端路由
　　前端路由
　　　　概念：根据不同的用户事件，显示不同的页面内容
　　　　本质：用户事件与事件处理函数之间的对应关系
　　　　前端路由负责事件监听，触发事件后，通过事件函数渲染不同的内容。
　　实现简易前端路由
　　　　基于URL中的hash实现（点击菜单的时候改变URL的hash，根据hash的变化控制组件的切换）
　　　　//监听windows的onhashchange事件，根据获取到的最新的hash值，切换要显示的组件的名称

windows.onhashchange = function(){
    //通过location.hash获取到最新的hash值
}

1.2、Vue Router
Vue Router是Vue.js官方的路由管理器，它和Vue.js的核心深度集成，可以非常方便的用于SPA应用程序的开发。
Vue Router包含的功能有：
　　支持HTML5历史模式或hash模式
　　支持嵌套路由
　　支持路由参数
　　支持编程式路由
　　支持命名路由
2、vue-router的基本使用
2.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',
    //为了能够让路由规则生效，必须把路由对象挂载到vue实例对象上
    router
})

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

var router = new VueRouter({
    routes:[
    //其中，path表示需要被重定向的原地址，redirect表示将要被重定向到的新地址
    {path:'/',redirect:'/user'},
    {path:'/user',component:User},
    {path:'/register',component:Register}
    ]
})

3、vue-router嵌套路由
3.1、嵌套路由用法
嵌套路由功能分析
　　点击父级路由链接显示模板内容
　　模板内容中又有子级路由链接
　　点击子级路由链接显示子级模板内容
父路由组件模板
　　父级路由链接
　　父组件路由填充位

<p>
    <router-link to="/user">User</router-link>
    <router-link to="/register">Register</router-link>
</p>
<div>
    //控制组件显示位置
    <router-view></router-view>
</div>

自己路由模板
　　子级路由链接
　　子级路由填充位

const Register = {
    template:`<div>
        <h1>Register组件</h1>
        <hr/>
        <router-link to="/register/tab1">Tab1</router-link>
        <router-link to="/register/tab1">Tab1</router-link>
        //子路由填充位置
        <router-view/>
    </div>`
}

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

var 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}
            ]
        }
    ]
})

 4、vue-router动态路由匹配

4.1、动态匹配路由的基本用法
思考：

//有如下3个路由链接
<router-link to="/user/1">User1</router-link>
<router-link to="/user/2">User2</router-link>
<router-link to="/user/3">User3</router-link>
//定义如下三个对应的路由规则，是否可行？？？
{path:'/user/1',component:User}
{path:'/user/2',component:User}
{path:'/user/3',component:User}
//上述做法存在的问题是：如果有N个路由链接则需要写N个相似的路由规则，动态路由可以解决这个问题

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

var router = new VueRouter{(
    routes:[
    //动态路径参数以冒号开头
        {path:'/user/id',component:User}
    ]
)}
const User = {
    //路由组件中通过$route.params获取路由参数
    template:'<div>User{{$route.params.id}}</div>'
}

4.2、路由组件传递参数
$route与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由解耦
props的值为布尔类型:

const router = new VueRouter({
    routes:[
        //如果props被设置为true,route.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:'lisi',age:12}}
    ]
})
const User = {
    props:['uname','age'],
    template:'<div>用户信息:{{ uanme + '---' + age }}</div>'//使用路由参数
}

props的值为函数类型：

const router = new VueRouter({
    routes:[
        //如果props是一个函数，则这个函数接收route对象为自己的形参
        {path:'/user/:id',
          component:User,
          props:route => {uname:'lisi',age:12,id:route.params.id}}
    ]
})
const User = {
    props:['uname','age',id],
    template:'<div>用户信息:{{ uanme + '---' + age + '---' + id }}</div>'//使用路由参数
}

5、vue-router命名路由
命名路由的配置规则
为了更加方便的表示路由的路径，可以给路由规则起一个别名，即为"命名路由"。

const router = new VueRouter({
    route:[
        {
            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}})

6、vue-router编程式导航
6.1、页面导航的两种方式
声明式导航:通过点击链接实现导航的方式，叫做声明式导航
例如：普通网页中的<a></a>链接或vue中的<router-link></router-link>
编程式导航：通过调用JavaScript形式的API实现导航的方式，叫做编程式导航
例如：普通网页中的location.href
6.2、编程式导航基本用法
常用的编程式导航API如下：

this.$router.push('hash地址')
this.$router.go(n)
const User = {
    template:'<div><button @click="goRgister">跳转到注册页面</button></div>',
    methods:{
        goRegister:function(){
            //用编程的方式控制路由跳转
            this.$router.push('/register');
        }
    }
}

6.3、编程式导航参数规则
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'}})