Vue-路由(一)

路由：路由是一个比较广义和抽象的概念，其本质就是对应关系；它分为前端路由和后端路由；

　　后端路由：指根据不同的用户URL请求，返回不同的内容；本质就是URL请求地址与服务器资源之间的对应关系；

• • 后端渲染(存在性能问题)
  • Ajax前端渲染(前端渲染提高性能，但是不支持浏览器的前进后退操作)
  • SPA(Single Page Application)单页面应用程序：整个网站只有一个页面，内容的变化通过Ajax局部更新实现，同时支持浏览器地址栏前进和后退操作；
  • SPA实现原理之一：基于URL地址的hash(hash的变化会导致浏览器记录访问历史的变化、但是hash的变化不会触发新的URL请求)
  • 在实现SPA过程中，最核心的技术点就是前端路由

　　前端路由：根据不同的用户事件，显示不同的页面内容；本质就是用户事件与事件处理函数之间的对应关系；

Vue Router：是vue.js官方的路由管理器(http://router.vuejs.org/zh/)；它和vue.js的核心深度集成，可以非常方便的用于SPA应用程序开发；

• 功能：支持HTML5历史模式或hash模式、支持嵌套路由、支持路由参数、支持编程式路由、支持命名路由 
• 基本使用步骤：引入相关库文件、添加路由链接、添加路由填充位、定义路由组件、配置路由规则并创建路由实例、把路由挂载到Vue根实例中；
  • 引入相关库文件：

<!--先导入vue文件，为全局window对象挂载vue构造函数-->
<script src=".lib/vue.js"></script>
<!--后导入vue-router文件，为全局window对象挂载VueRouter构造函数-->
<script src="./lib/vue-router.js"></script>

• •  添加路由链接：

<!--router-link是vue中提供的标签，默认渲染为a标签-->
<!--to属性默认渲染为href属性-->
<!--to属性的值默认会被渲染为#开头的hash地址-->
<router-link to="/user">User</router-link>
<router-link to="reqister">Reqister</touter-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根实例中：

var vm = new Vue({
    el:'#app',
    //为了能够让路由规则生效，必须把路由对象挂载到vue实例对象上
    //router:router
　　router
})

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

　　通过路由规则的redirect属性，指定一个新的路由地址，可以很方便地设置路由地重定向：

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

嵌套路由：

• 功能：点击父级路由链接显示模板内容、模板内容中又有子级路由链接、点击子集路由链接显示子集模板内容
• 用法：
  • 父路由组件模板：父级路由链接、父组件路由填充位

<p>
    <router-link to="/user">User</router-lilnk>
    <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/tab2">Tab2</router-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}
            ]
        }
    ]
})

动态路由：当路由规则匹配时是有规律的，可以采用动态路由匹配，节省代码量

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

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

1.props的值为布尔类型 const router new VueRouter({ routes:[ //如果props被设置为true，route.params将会被设置为组件属性 {path:'/user/:id',component:User,props:true} ] }) const User = { props:['id'], //使用props接收路由参数 templata:'<div>User{{id}}</div>' //使用路由参数 }

2.props的值为对象类型
const router = new VueRouter({
    routes:[
        //如果porps是一个对象，它会被按原样设置为组件属性,此时id无法提供值
        {path:'/user/:id',component:User,props:{uname:'list',age:12}}
    ]
})
const User = {
    props:['uname','age'],
    template:'<div>用户信息：{{uname + '----' + age}}</div>'
}

3.props的值为函数类型
const router = new VueRouter({
    routes:[
        //如果porps是一个函数，它接收route对象为自己的形参
        {path:'/user/:id',component:User,
            props:route=>({umane:'zs',age:12,id:route.params.id})
        }}
    ]
})
const User = {
    props:['uname','age','id'],
    template:'<div>用户信息：{{uname + '----' + age + '----' + id}}</div>'
}

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

const router = new VueRouter({
    routes:[
        {path:'/user/:id',
            name:'user',
            component:User
        }
    ]
})
<router-link :to="{name:'user',params:{id:123}}">User</router-link> //id须跟前面对应
router.push({name:'user',params:{id:123} })

 声明式导航：通过点击链接实现导航的方式；如a标签、router-link标签

编程式导航：通过调用JavaScript形式的API实现导航的方式；如location.href

//常用编程式导航API
this.$router.push('hash地址');
this.$router.go(n);  //-1为后退

router.push()方法的参数规则
//字符串(路径名字)
router.push('/home');
//对象
router.push({path:'/home'});
//命名的路由(传递参数)
router.push({name:'user',params:{userId:123} })
//带查询参数，变成/register?uname=list
router.push({path:'/register',query:{uname:'list'} })