Vue Router

<!-- ##.前端路由 -->
路由是指URL地址与程序的映射关系，更改URL地址可以改变程序的执行结果。简单说就是请求什么响应什么。
//前端路由是基于hash值的变化进行实现的（比如点击页面中的菜单或者按钮改变URL的hash值，根据hash值的变化来控制组件的切换）

<!-- 1. -->
window.onhashchange = function(){
    location.hash  //location.hash可以获取到最新的hash值
} 

<a href="#/zhuye">主页</a> 
点击这些超链接,就会改变url地址中的hash值,触发onhashchange事件,根据hash值来让不同的组件进行显示

<!-- 2.Vue Router -->
它是一个Vue.js官方提供的路由管理器。是一个功能更加强大的前端路由器，推荐使用。
-Vue Router的特性：
-支持H5历史模式或者hash模式 -支持嵌套路由  -支持路由参数  -支持编程式路由  -支持命名路由  -支持路由导航守卫
-支持路由过渡动画特效  -支持路由懒加载 -支持路由滚动行为

Vue Router的使用步骤:
    A.引入Router
    B.添加路由链接: <router-link to="/login">Login</router-link>
    C.添加路由填充位（路由占位符）:<router-view></router-view>
    D.定义路由组件:var Login = { template:"<div>This is Login</div>" }
    E.配置路由规则并创建路由实例
        var myRouter = new VueRouter({  //routes是路由规则数组
            routes:[
                //每一个路由规则都是一个对象，对象中至少包含path和component两个属性
                //path表示  路由匹配的hash地址，component表示路由规则对应要展示的组件对象
                {path:"/user",component:User}
            ]})
    F.将路由挂载到Vue实例中:
        new Vue({
            el:"#app",
            //通过router属性挂载路由对象
            router:myRouter
        })

路由重定向：可以通过路由重定向为页面设置默认展示的组件
    //path设置为/表示页面最初始的地址 / ,redirect表示要被重定向的新地址，设置为一个路由即可
    { path:"/",redirect:"/user"}

<!-- 3.嵌套路由 -->
//当我们进行路由的时候显示的组件中还有新的子级路由链接以及内容。
    /login/account   //有一个/login的路由,下面还可以添加子级路由
    var myRouter = new VueRouter({
        routes: [    //routes是路由规则数组
            { path: "/user", component: User },
            { path: "/login", component: Login,
                  //通过children属性为/login添加子路由规则
                  children:[{ path: "/login/account", component: account }] 
            }   
            ]})

<!-- 4.动态路由匹配 -->
A: //$route.params.id  方法可以动态获取路径参数id值
    var myRouter = new VueRouter({
        routes: [
     //通过/:参数名  的形式传递参数 
            { path: "/user/:id", component: User },
        ]}) 
    //用户可以再user模板页面中访问到id值
        var User = { template:"<div>用户：{{$route.params.id}}</div>"}

B: 我们可以通过props来接收参数
    var User = { 
        props:["id"],  //然后页面直接访问
        template:"<div>用户：{{id}}</div>" }

    var myRouter = new VueRouter({
        routes: [
            //如果props设置为true，route.params将会被设置为组件属性
            { path: "/user/:id", component: User,props:true },
        ]})

C: 可以将props设置为对象，那么就直接将对象的数据传递给组件进行使用
    var User = { 
        props:["username","pwd"],
        template:"<div>用户：{{username}}---{{pwd}}</div>"
        }

    var myRouter = new VueRouter({
        routes: [
            //如果props设置为对象，则传递的是对象中的数据给组件
            { path: "/user/:id", component: User,props:{username:"jack",pwd:123} },
        ]})

D: 如果想要获取传递的参数值还想要获取传递的对象数据，那么props应该设置为函数形式。
    var User = { 
        props:["username","pwd","id"],
        template:"<div>用户：{{id}} -> {{username}}---{{pwd}}</div>" }

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

<!-- 5.命名路由 -->
//给路由取别名:
    var myRouter = new VueRouter({
    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} } )

<!-- 6.编程式导航 -->
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 );

<!--7. vue-router query和params传参(接收参数)$router $route的区别 -->
//注意:传参是this.$router,接收参数是this.$route
1.$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法
2.$route为当前router跳转对象，里面可以获取name、path、query、params等

A: query方式传参和接收参数
    传参: 
    this.$router.push({
            path:'/xxx',
            query:{
              id:id }
          })
    接收参数:
    this.$route.query.id

B:params方式传参和接收参数
    传参: 
    this.$router.push({
            name:'xxx',
            params:{
              id:id }
        })
    接收参数:
    this.$route.params.id

//注意:params传参，push里面只能是 name:'xxxx',不能是path:'/xxx',因为params只能用name来引入路由，
如果这里写成了path，接收参数页面会是undefined