vue路由的使用，命名，参数，范式，嵌套，动态匹配

基本使用：
1，让Vue使用该VueRouter创建,

Vue.use(VueRouter);

2, 创建router对象

var router = new VueRouter({
    });

3, 在创建的router对象中配置路由对象，路由匹配的规则,

var router = new VueRouter({
        routes: [
            {
                path: '/login',
                component: Login
            },
            {
                path: '/register',
                component: Register
            }
        ]
    });

4, 把创建完的路由对象放到Vue实例中管理

let vm = new Vue({
        el: "#app",
        data() {
            return {}
        },
        methods: {},
        components: {
            App
        },
        template: `<App></App>`,
        //把Router交给Vue实例管理
        router//和App一样，<==> router:router  只写一个即可
    })

两个组件

let Login = {
        template: `<div>登录页面</div>`
    };
let Register = {
        template: `<div>注册页面</div>`
    };

App中使用VueRouter提供的属性替换a标签
引入vue-router.js文件，文件中有两个组件 router-link 和 router-view
router-link 相当于a标签，这里有一个to属性指向a标签的href属性
router-view 是路由匹配组件的出口，即显示的组件的位置

let App = {
        template: `<div id="app">
<!--            <a href="#"><button>Login</button></a>-->
<!-- 用router-link和router-view替换a标签<a href="#"><button>Register</button></a>-->
                <router-link to="/login"><button>Login</button></router-link>
                <router-link to="/register"><button>Register</button></router-link>
                <router-view></router-view>
        </div>`,
   };

命名

Vue.use(VueRouter);
    let router = new VueRouter({
        routes: [
            {
                name:'Login',
                path:"/login",
                component:Login
            },
            {
                name:'Register',
                path:"/register",
                component:Register
            }
        ]
    });
    let App = {
        template: `<div id="app">
            <router-link :to="{name:'Login'}">Login</router-link>
            <router-link :to="{name:'Register'}">Register</router-link>
            <router-view></router-view>
        </div>`
    };

绑定to属性to属性是一个对象，命名一个name可以通过name查找地址，也可以绑定别的
路由的参数和范式

//动态路由参数格式 params设置参数 ： xxx.html#/user/1
//查询       格式  query设置参数 ： xxx.html#/user?userId=1
Vue.use(VueRouter);
    let router = new VueRouter({
        routes:[
            {
                name:'User_One',
                path:'/user/:id',//动态匹配 :id  用params
                component:Params
            },
            {
                name:'User_Two',
                path:'/user',
                component:Query//查询 用query
            }
        ]
    });
    
    let App = {
        template:`<div id="app">
            <router-link :to="{name:'User_One',params:{id:1}}">User One</router-link>
            <router-link :to="{name:'User_Two',query:{userId:2}}">User Two</router-link>
            <router-view></router-view>
        </div>`
    };

参数写在to绑定的对象中，:id绑定id的路由用params:{id:xx}绑定参数，组件可以根据传入的参数进行不同操作，查询用query:{xxx:xxx}

//Router.js 文件引入后抛出两个对象供我们使用
 // $router => VueRouter实例 $route => VueRouter实例的routes属性
 //this.$route.params.id//可以查询传入的id

路由的嵌套

Vue.use(VueRouter);
    let router = new VueRouter({
        routes: [
            {
                name: 'Home',
                path: '/home',
                component: Home,
                children:[
                    {
                        name:'About',
                        path:'/about',
                        component:About
                    },
                    {
                        name:'Picture',
                        path:'/picture',
                        component:Picture
                    }
                ]
            }
        ]
    });
    let App = {
        template: `<div id="app">
        <router-link :to="{name:'Home'}">Home</router-link>
        <router-view></router-view>
    </div>`

使用了children属性，配置嵌入的组件的信息

let About = {
        template: `<div>
        <p>About Us</p>
    </div>`
    };
    let Home = Vue.component('Home', {
        template: `<div >
        <p>Home Page</p>
        <router-link :to="{name:'Picture'}">Picture</router-link>
        <router-link :to="{name:'About'}">About</router-link>
        <router-view></router-view>
    </div>`
    });
    let Picture = {
        template: `<div>
            <p>Picture Rover</p>
        </div>`
    };

动态匹配路由

Vue.use(VueRouter);
    let router = new VueRouter({
       routes:[
           {
               name:'home',
               path:'/home',
               component:Home,
               children:[
                   {
                       name:'one',
                       path:'/home/:id',
                       component:Common,
                   }
               ]
           }
       ]
    });
    let App = {
        template:`<div id="app">
            <router-link :to="{name:'home'}">Home</router-link>
            <router-view></router-view>
        </div>`
    };

let Home = {
      template:`<div>
            <router-link :to="{name:'one',params:{id:'one'}}">one</router-link>
            <router-link :to="{name:'one',params:{id:'two'}}">two</router-link>
            <!--<> 这要注意：因为上面两个链接指向的是同一个组件，所以在点击过一个再点击另一个触发的组件还是同一个这样vue不会对其进行渲染，虽然路由发生改变，但组件并没有重新渲染，还是第一个点击获取的信息，解决这个问题就是在公共组件中使用watch监听传入路由的参数的变化，来做出响应反应 </>-->
             <router-view></router-view>
            <p>Home Page</p>
        </div>`,
        methods:{
        }

    };

let Common = {
      template:`<div>
        <p>{{Common}}</p>
    </div>`,
        data(){
          return{
              Common:""
          }
        },
        created(){
          //这里不在组件渲染完成给Common一个值的话，点击同一个链接Common不会渲染到界面上
            if (this.$route.params.id === 'two'){
                this.Common = 'two';
            }else if (this.$route.params.id === 'one'){
                this.Common = 'one';
            }
        },
        watch:{//watch 监听传入id的变化，并根据参数变化进行操作
            $route(value,oldValue){
                if (value.params.id === 'one'){
                    this.Common = 'one';
                }else if (value.params.id === 'two'){
                    this.Common = value.params.id
                }
            }
        }
    };

这样根据传入不同的参数，公共组件中的数据会不同展示，数据驱动试图