router路由插件

先导入vue.js在导入vue router.js
需要在vue实例中添加router:router(创建的路由对象名)
在全局js中用app(自定义vue实例名).$route来获取路由
写在vue实例之前

1,创建组件components
2,定义切换规则(路由规则)
     const routes=[
//数组中每一个对象就是一个规则
         {path:“/”,redirect:“/one(打开时默认显示one组件)”},//路由重定向，相当于把 / 替换为 /one
         {path:“/one(自定义添加在url后面的字段)”,component:one(组件名)},
         {path:“/two(自定义)”,component:two(组件名)}
     ]
3,创建路由对象
     const router=new VueRouter({
           routes:routes,(切换规则)
           linkActiveClass:“active(自定义组件激活时的类名)”(需要改变激活时的样式就用.active改变即可)
     })
4,将创建好的路由对象绑定在vue实例上
    var app=new Vue({
        el:“#app”,
        router:router(路由对象名),
    })
5,使用
在html内使用<router-view></router-view>来显示要切换的内容

<router-link>默认渲染为a标签，如果要渲染成其他标签可以添加tag=“button(标签名)”的方法来实现
<router-link to=“/one(2里创建的)” tag=“button”></router-link>来替代a标签



通过url传递数据的方式(使用hash传递)
方法一
把数据绑定到url后面，如:
？key=value&key=value的方式传递
www.xxx.com/one？name=张三&age=18
在组件中使用，建议在created生命周期中来获取数据
template:“#one”,
created(){
   console.log(this.$route.query.name(key属性))
}

方法二
1,在定义切换规则时添加key占位符，如
{path:“/one/:name/:age”,component:one}
2,把数据添加到url后面，如
/one/张三/18
3,在组件中使用created方法获取数据，如
template:“#one”,
created(){
    console.log(this.$route.params.name(key名))
}


添加子路由
<template id=“one”>
   <div>
       <router-link to=“/one/son1”></>
      <router-link to=“/one/son2”></>
     <router-view></>
   </div>
</>
创建子组件components
创建子路由规则
const routes=[
   {path:“/one”,component:one,children:[
        //为子界面设置默认显示界面
       {path:“/one”,redirect:“/one/son1”},
       //创建子路由规则不用写/，会在son1前自动加/one，最后显示为/one/son1
       {path:“son1”,component:son1},
       {path:“son2”,component:son2}
   ]}
]


命名视图(当有多个router-view标签时，可以精准替换)和插槽类似

当有多个组件要同时使用<router-virw>标签显示时,定义一个name属性
1,定义规则
const routes=[
  {
    //默认两个组件都显示出来
       path:“/”,
       components:{
              name1(自定义):one,
        　name2:two
        }
   }
]
2,html中使用
<router-view name=“name1(自定义名)”</>
<router-view name=“name2(自定义名)”</>


使用vue实例中的watch监听路由地址变化
1,创建组件
2,定义路由规则
const routes=[{path:“/one”,component:one}]
3,创建路由对象
const router=new VueRouter({
    routes:routes,
    linkActiveClass:“active”
})
var vue=new Vue({
    el:“#app”,
    router:router
    watch:{
          “$route.path”(newvalue,oldvalue){
            console.log(newvalue,oldvalue)
            }
    }
})