[JavaScript知识库]vue-router

重瞳本是无敌路，何须再借他人骨

一、Router

1. 路由默认情况下是Hash模式, 比如像这种带#的url, http://localhost:8080/#/home 或者 http://localhost:8080/#/about, 我们可以改成为 history模式，修改如下：(只需要在创建Router的时候给他传入一个模式)
   	const router =  new VueRouter({
   		routes,
           mode: "history"	
       })
   注：这样，就变成了HTML5的history模式了。   http://localhost:8080/home
   

2. < router-link> 会被渲染为 < a> 标签。

1）、tag属性
    <router-link to="/home" tag="button"></router-link>
    默认是显示为 <a>标签，如果加上 tag属性，就会显示为按钮。
    
2）、replace属性
    点击浏览器 返回按钮 是不会来回返回的。内部使用的是history.resplaceState方法。并不是history.pushstate()
    <router-link to="/home" tag="button"></router-link>
    <router-link to="/about" tag="button"></router-link>

3）、active-class属性
	<router-link to="/home" tag="button" active-class="active" ></router-link>
	<style>
        .active {
            color :#f00;
        }
	</style>

4、路由的跳转： 
	通过代码的修改路径，不建议使用history.pushstate()，因为这样是绕过来vue-router了，我们可以使用	
	this.$router.push('/home'),点击浏览器 返回按钮  可以返回
    this.$router.replace('/home'),点击浏览器 返回按钮  不可以返回

3. 动态路由：

   1)、属性中怎么绑定data里面的数据？
   	{
           path: 'user/:userId',
           component: User
       }
   	<router-link to="/user" >用户</router-link>是无法绑定的，我们应该使用v-bind， 如下：
   	<router-link :to="'/user/' + userId" >用户</router-link>
   	
   2)、this.$route拿到浏览器 当前活跃的路由， route就是那个活跃的路由
       this.$route.params.userId拿到浏览器/user/后面的参数，比如 http://localhost：8080/user/zhangsan, 拿到的就是zhangsan。可以通过计算属性实现：
   	computed: {
           userId(){
   			return this.$route.params.userId
           }
       }
   

4. 路由的懒加载

   1）、打包构建应用，js包很大，影响页面加载，因为一次性请求下来这个页面，会出现短暂的空白。将js分成了三部分： 业务开发的代码(代码最多)、底层支撑的代码、第三方库的代码等。
   
   2）、一个路由，一个组件，一个js文件，打包的时候。路由懒加载的作用就是将路由对应的组件打包成一个个的js代码块，只有这个路由被访问的时候，才加载对应的组件。
   
   

   

   懒加载的方式：

   

   代码改动如下：

   

5. vue-router参数传递 : params方式 和 query方式

   1）params的类型：
   	配置路由格式：/router/:id
       传递的方式：在path后面跟上对应的值
       传递后形成的路径： /router/123, /router/abc
       
   2)query的类型：
   	配置路由格式: /router,也就是普通配置
   	传递的方式：对象中使用query的key作为传递方式， 比如：
           <router-link :to="{path:'/user', query:{name:'why', age:134}}" >档案</router-link>
       传递后形成的路径： /router?id=123, /router?id=abc
   	取出query,使用 <h1>{{ $route.query.name }}</h1>
   3)、URL:
   	协议：//主机:端口/路径？查询
       scheme://host:port/path?query#fragment
   
   4)、this.$router 跟 this.$route, 就是在vue的原型上加的。所有的组件都继承着vue类的原型。
   	vue.prototype.test = function(){
           console.log("test")
       }	//这个方法其他组件就可以调用： this.test()