Vue路由VueRouter

实现一个入门级别的Vue路由

1.引入vue-router.js：
可以采用npm安装，cdn链接，也可以直接下载vue-router.js,因为是入门，所以用cdn链接最简单。

//先引入vue.js,载引入vue-router, 因为vue-router依赖于vue
vue：https://cdn.jsdelivr.net/npm/vue/dist/vue.js
vue-router：https://unpkg.com/vue-router/dist/vue-router.js

2.定义组件：

// 局部组件
var login = {
    template:`<h1>login组件</h1>`
} 
var reg = {
    template:`<h1>reg组件</h1>`
} 

将局部组件挂载到Vue实例中：

var vm = new Vue({
    el: '#app',
    // 挂载组件
   component:{
       login,
       reg,
   },
});

3.定义路由：

var router = new VueRouter({
    routes: [
        {path:'/login',component:login},
        {path:'/reg',component:reg},
    ]
})

挂载路由：

var vm = new Vue({
    el: '#app',
    // 挂载组件
   component:{
       login,
       reg,
   },
    //    挂载路由
    router,
});

4.显示路由组件中的数据：
使用vue-router中的占位符，能够在html中显示组件的dom信息。

<div id="app">
    <!-- 占位符 -->
    <router-view></router-view>
</div>

5.路由超链接
采用vue-router独有的router-link标签，to后面写路由路径，可以在开发者工具中看到此时页面上显示的是两个a标签。

<div id="app">
    <!-- 变成a标签，方便点击 -->
    <router-link to="/login">login</router-link>
    <router-link to="/reg">reg</router-link>
    <!-- 占位符 -->
    <router-view></router-view>
</div>

路由高亮

当路由router-link被点击后，该标签会新增一个router-link-active类，用于显示链接被点击后的颜色。我们也可以根据我们的喜好进行修改。

我们改成红色试试：

.router-link-active {
   color: red;
}

我们看到reg被点击后变成了红色而不是默认的蓝色。

路由重定向

在router中再添加一个路由，这回使用redirect进行重定向。

var router = new VueRouter({
    routes: [
        //    当未输入路由时，自动显示reg组件内容
        {path:'/',redirect:'/reg'},
        {path:'/login',component:login},
        {path:'/reg',component:reg},
         //    当输入未定义的路由时，自动显示reg组件内容
        {path:'*',redirect:'/reg'},
    ]
})

路由嵌套

定义一个路由的子路由，给这个路由再添加children属性，在children里面再定义子路由。

var router = new VueRouter({
    routes: [
        {path:'/',component:reg},
        {
            path:'/login',
            component:login,
            children:[
             //    第一种写完整路径
            {path:'/login/com1',component:com1},
         	//    第二种：直接写子路由，不用'/'
            {path:'com2',component:com2},
            ]
         },
        {path:'/reg',component:reg},
     //    当输入未定义的路由时，自动显示reg组件内容
        {path:'*',component:reg},
    ]
})

动态路由

1.路由路径是/com2/:id格式，用{{$route.params.id}}获取路由过来的值。

var router = new VueRouter({
    routes: [
    	{path:'/com2/:id',component:com2},
    ]      
})

var com2 = {
    template:`<h2>com2组件------{{$route.params.id}}</h2>`
} 

2.路由路径是/com2/:id格式，给组件添加props属性，props为true，用{{id}}获取路由过来的值。

var com2 = {
 	// 给组件添加props属性	
    props:['id'],
    template:`<h2>com2组件------{{id}}</h2>`
} 
var router = new VueRouter({
    routes: [
    	{path:'/com2/:id',component:com2,props:true},
    ]      
})

3.路由路径是/com2/:id格式，props为要传的一个对象时，获取不到id值。可以获取props对象中传的值。

var com2 = {
    props:['id','name','age'],
     //    com2组件----------zy-----21  id没有显示
    template:`<h2>com2组件------{{id}}----{{name}}-----{{age}}</h2>`
} 
var router = new VueRouter({
    routes: [
    	{path:'/com2/:id',component:com2,props:{
             name:'zy',
             age:21
        }},
    ]      
})

3.1要想获取id，得把id也通过props传出去

{
	path:'/com2/:id',component:com2,props:router=>({id:router.params.id,name:'zy',age:21})
},

4.路由路径是/com2?name=zy格式，给组件添加props属性,用{{$route.query.name}}获取路由过来的值。

var login = {
    template:`
    <div>
         <router-link to="/com2?name=zy">/login/com2</router-link>
         <router-view></router-view>
     </div>`
} 
var router = new VueRouter({
    routes: [
    	{path:'/com2',component:com2},
    ]      
})

var com2 = {
    props:['id','name','age'],
 //    com2组件------2----zy-----21  id有显示
    template:`<h2>com2组件------{{$route.query.name}}</h2>`
} 

编程式导航

1 第一个知识 编程式导航/编程式路由
this.$router.push('/路径')

// myname是组件名称，用{{$route.params.age}}在myname组件中获取传过来的值
this.$router.push({name:'myname',params:{age:100}})

//用{{$route.query.userid}}在新组件中获取传过来的值
this.$router.psuh({path:'不加/ 直接写路径',query:{userid:100}})

2 前进与后退,正数前进 负数后退
this.$router.go(数字)
3 转换 hash 模式 与h5 模式 默认是hash 模式
mode: 'history', /* 表示 H5 的模式*/
4 动态 router-link , name是组件的name

<router-link :to="{name:'user',params:{userid:'xxx'}}">user</router-link>

演示代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>09编程式路由 </title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    
</head>

<body>
    <div id="app">
        <!-- 变成a标签，方便点击 -->
        <router-link to="/login">login</router-link>
        <router-link to="/reg">reg</router-link>
        <!-- 占位符 -->
        <router-view></router-view>
    </div>
   
    <script>
       var login = {
           template:`
           <div>
                <h1>login组件</h1>
                <button @click='goReg'>点我跳转到reg</button>
            </div>`,
            methods: {
                goReg() {
                    this.$router.push({path:'reg',query:{age:10}})
                }
            },
       } 
       var reg = {
           template:`
           <div>
                <h1>reg组件----{{$route.query.age}}</h1>
                <button @click='goBack'>点我跳转到login</button>
            </div>`,
            methods: {
                goBack() {
                    this.$router.go(-1)
                }
            }, 
       } 
       
       var router = new VueRouter({
           routes: [
               {path:'/',redirect:'/login'},
               {path:'/login',component:login,},
               {path:'/reg',component:reg,name:'reg'},
            	//    当输入未定义的路由时，自动显示reg组件内容
               {path:'*',redirect:'/reg'},
           ]
       })
        var vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
            },
           component:{
               login,
               reg,
           },
            //    挂载路由
            router,
        });
    </script>
</body>
</html>