【vue】Vue Router

Vue Router官网

它是一个Vue.js官方提供的路由管理器。是一个功能更加强大的前端路由器，推荐使用。
Vue Router和Vue.js非常契合，可以一起方便的实现SPA(single page web application,单页应用程序)应用程序的开发。
Vue Router依赖于Vue，所以需要先引入Vue，再引入Vue Router

• vue-router是基于路由和组件的
  路由用于设定访问路径,将路径和组件映射起来.
  在vue-router的单页面应用中,页面的路径的改变就是组件的切换.

Vue Router的特性：

• 支持H5历史模式或者hash模式
• 支持嵌套路由
• 支持路由参数
• 支持编程式路由
• 支持命名路由
• 支持路由导航守卫*
• 支持路由过渡动画特效*
• 支持路由懒加载*
• 支持路由滚动行为*

一.Vue Router的使用步骤

1：导入js文件

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

2：添加路由链接:

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

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

3：添加路由填充位（路由占位符）

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

4：定义路由组件

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

5：配置路由规则并创建路由实例

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

6：将路由挂载到Vue实例中

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

<router-link>:该标签是一个vue-router中已经内置的组件,它会被渲染成一个<a>标签.

在<router-link>中，我们只是使用了一个属性: to，用于指定跳转的路径.

<router-link>还有一些其他属性:

<router-link to='/home' tag='li'>

1：tag: tag可以指定<router-link>之后渲染成什么组件,比如上面的代码会被渲染成一个<li>元素,而不是<a>

2：replace: replace不会留下history记录,所以指定replace的情况下，后退键返回不能返回到上一个页面中

3：active-class:当<router-link>对应的路由匹配成功时,会自动给当前元素设置一个router-link-active的class,设置active-class可以修改默认的名称.

进行高亮显示的导航菜单或者底部tabbar时,会使用到该类.

但是通常不会修改类的属性,会直接使用默认的router-link-active即可.

<router-view>:该标签会根据当前的路径,动态渲染出不同的组件.

网页的其他内容,比如顶部的标题/导航,或者底部的一些版权信息等会和<router-view>处于同一个等级.

在路由切换时,切换的是<router-view>挂载的组件,其他内容不会发生改变.

二：路由重定向

路由重定向指的是:用户在访问地址A 的时候，强制用户跳转到地址c，从而展示特定的组件页面;

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

一里面的第五步：路由规则部分添加：

var myRouter = new VueRouter({
    //routes是路由规则数组
    routes: [
        //path设置为/表示页面最初始的地址 / ,redirect表示要被重定向的新地址，设置为一个路由即可
        { path:"/",redirect:"/user"},
        { path: "/user", component: User },
        { path: "/login", component: Login }
    ]
})

三：嵌套路由

• 点击父级路由链接显示模板内容
• 模板内容中又有子级路由链接
• 点击子级路由链接显示子级模板内容

比如我们有一个/login的路由
那么/login下面还可以添加子级路由，如:
/login/account
/login/phone

var User = { template: "<div>This is User</div>" }
//Login组件中的模板代码里面包含了子级路由链接以及子级路由的占位符
    var Login = { template: `<div>
        <h1>This is Login</h1>
        <hr>
        <router-link to="/login/account">账号密码登录</router-link>
        <router-link to="/login/phone">扫码登录</router-link>
        <!-- 子路由组件将会在router-view中显示 -->
        <router-view></router-view>
        </div>` }

    //定义两个子级路由组件
    var account = { template:"<div>账号：<input><br>密码：<input></div>"};
    var phone = { template:"<h1>扫我二维码</h1>"};
    var myRouter = new VueRouter({
        //routes是路由规则数组
        routes: [
            { path:"/",redirect:"/user"},
            { path: "/user", component: User },
            { 
                path: "/login", 
                component: Login,
                //通过children属性为/login添加子路由规则
                children:[
                    { path: "/login/account", component: account },
                    { path: "/login/phone", component: phone },
                ]
            }
        ]
    })

    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router:myRouter
    });

四：动态路由匹配

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

五：命名路由

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

页面导航的两种方式：
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 );

七：路由的懒加载

• 官方给出了解释:
  当打包构建应用时，Javascript包会变得非常大，影响页面加载。
  如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了
• 官方在说什么呢?
  首先,我们知道路由中通常会定义很多不同的页面.
  这个页面最后被打包在哪里呢?一般情况下，是放在一个js文件中.
  但是，页面这么多放在一个js文件中,必然会造成这个页面非常的大.
  如果我们一次性从服务器请求下来这个页面,可能需要花费一定的时间,甚至用户的电脑上还出现了短暂空白的情况.
• 如何避免这种情况呢?
  使用路由懒加载就可以了.

懒加载的方式：

八：传递参数的方式

• 传递参数主要有两种类型: params和query
• params的类型:
  配置路由格式: /router/:id
  传递的方式:在path后面跟上对应的值
  传递后形成的路径: /router/123,/router/abc
• query的类型:
  配置路由格式: /router, 也就是普通配置
  传递的方式:对象中使用query的key作为传递方式
  传递后形成的路径: /router?id=123,/router?id=abc
• 如何使用它们呢?
  也有两种方式:的方式和JavaScript代码方式

九：路由导航守卫