vue-router 的基本使用

1.什么是路由

  路由，其实就是指向的意思。例如：页面上有两个按钮分别是Home和About，他们对应的页面分别是home和about。当我们点击页面上的Home按钮时，页面中就要显示 home 页的内容，如果点击页面上的About按钮，页面中就要显示 about 页的内容。

也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。
  客户端中的路由，实际上就是dom 元素的显示和隐藏。当页面中显示home 内容的时候，about 中的内容全部隐藏，反之也是一样。
代码路径：src/App.vue

<template>
  <div id="app">
  	<!-- to属性：相当于a标签中的"herf"属性，后面跟跳转链接所用 -->
  	<!-- tag属性：具有tag属性的router-link会被渲染成相应的标签 -->
  	<!-- 当匹配到目标路由时，router-link会自动获取 router-link-exact-active 和 router-link-active 这两个类。-->
  	<!-- exact属性：开启router-link的严格模式 如果不加exact属性，则会在home/article页面下也会被匹配到 -->
  	<!-- replace属性：replace在routre-link标签中添加后，页面切换时不会留下历史记录 -->
  	
    <router-link to="/home" tag="button">Home</router-link>
    <router-link to="/about" tag="button">About</router-link>

    <!-- 路由匹配到的组件将显示在这里 -->
    <router-view/>
  </div>
</template>

<script>
  export default {
    name: 'App',
    components:{}
  }
</script>

<style lang="scss">
  #app{
    width:200px;
    height:50px;
    margin:0 auto;
    button{
      width:50px;
      height:30px;
      border:0;
      border-radius:3px;
    }
    .router-link-exact-active{
      background:#409eff;
      color:#fff;
    }
  }
</style>

2.路由中有三个基本的概念 route, routes, router。

  1. route它是一条路由，由这个英文单词也可以看出来，它是单数。(Home按钮 => home内容， 这是一条route，about按钮 => about 内容， 这是另一条路由。)
  2. routes是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， { about按钮 => about 内容}]
  3. router是一个机制，相当于一个管理者，它来管理路由。因为routes 只是定义了一组路由，它放在哪里是静止的，当真正来了请求，怎么办？ 就是当用户点击home 按钮的时候，怎么办？这时router 就起作用了，它到routes 中去查找，去找到对应的 home 内容，所以页面中就显示了 home 内容。
代码路径：src/router/index.js

import Vue from 'vue';
import Router from 'vue-router';

// 引入组件
import Home from "@/components/luyou/Home";
import About from "@/components/luyou/About";

// 要告诉 vue 使用 Router
Vue.use(Router)
export default new Router({ // router是一个机制
  routes: [ // routes是一组路由
    { // route是一条路由
      name: 'Home',
      path: '/home',
      component: Home
    },
    {
      name: 'About',
      path: '/about',
      component: About
    },
    { //重定向，首次进入时要定位到 home页。
	  path: '/',  
	  redirect: '/home' 
    }
  ]
})

在src/components/luyou目录下新建两个组件，Home.vue 和 About.vue。

<template>
	<div>
		<h4>Home</h4>
		<p>{{message}}</p>
	</div>
</template>

<script>
	export default {
		name:'Home',
		data(){
			return{
				message:'我是home页'
			}
		}
	}
</script>

<template>
	<div>
		<h4>About</h4>
		<p>{{message}}</p>
	</div>
</template>

<script>
	export default {
		name:'About',
		data(){
			return{
				message:'我是about页'
			}
		}
	}
</script>

最后不要忘记在主组件中(main.js)注册路由。

import Vue from 'vue';
import App from './App';
import router from './router';  //引入路由

new Vue({
  el: '#app',
  router, //注册路由
  components: { App },
  template: '<App/>'
})

3.动态路由

  上面我们定义的路由，都是严格匹配的，只有router-link 中的to属性和 js 中一条路由route中 path 一模一样，才能显示相应的组件。

<router-link to="/home" tag="button">Home</router-link>
routes:[{ path: '/home',name: 'Home',component: Home }]

  但有时现实却不是这样的，当我们去访问网站并登录成功后，它会显示欢迎你+ 你的名字。不同的用户登录， 只是显示 “你的名字” 部分不同，其它部分是一样的。这就表示，它是一个组件，假设是user 组件。不同的用户(就是用户的id不同)，它都会导航到同一个user 组件中。这样我们在配置路由的时候，就不能写死，就是路由中的path属性，不能写死，那要怎么设置？ 导航到 user 组件，路径中肯定有user， id 不同，那就给路径一个动态部分来匹配不同的id。在vue-router中，动态部分以： 开头，那么路径就变成了 /user/:id, 这条路由就可以这么写：{ path:"/user/:id", component: user }。

代码路径：src/App.vue

<template>
  <div id="app">
    <ul class="head">
      <router-link to="/detail/小明" tag="li">Detail</router-link>
    </ul>
    <!-- 路由匹配到的组件将显示在这里 -->
    <router-view/>
  </div>
</template>

<script>
  export default {
    name: 'App',
    components:{
     
    }
  }
</script>

<style lang="scss">
  *{
    margin:0;
    padding:0;
  }
  li{
    list-style:none;
  }
  #app{
    width:200px;
    height:160px;
    padding:5px;
    margin:10px auto;
    border:1px solid #000;
    border-radius:5px;
    background:#eee;
    .head{
      width:100%;
      overflow:hidden;
      background:#ccc;
      li{
        width:50px;
        height:30px;
        line-height:30px;
        float:left;
      }
      .router-link-exact-active{
        background:#409eff;
        color:#fff;
      }
    }
  }
</style>

代码路径：src/components/dynamicRoute/Detail

<template>
    <div class="Detail">
        <h4>Detail页</h4>
        <div>你好{{dynamicRoute}}</div>
    </div>
</template>

<script>
    export default {
        computed: {
            dynamicRoute () {
            	// 当匹配到一个路由时，参数值会被设置到 this.$route.params，
            	// 可以在每个组件内使用。
                return this.$route.params.username
            }
        }
    }
</script>

<style>
</style>

代码路径：src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'

// 引入组件
import Detail from '@/components/dynamicRoute/Detail';

// 要告诉 vue 使用 Router
Vue.use(Router)

export default new Router({
  routes: [{name: 'Detail',path: '/detail/:username',component: Detail}]
})

4.嵌套路由

 routes: [
    { name: 'Home',path: '/home',component: Home,
      children: [ // 子路由 /home/list/:id
      		{ path: "list/:id",component: List }
      ]
    }
]

5.声明式导航与编程式导航

  相同点：都能进行导航，都可以触发路由，实现组件切换
  不同点：声明式导航：写在组件的template中，通过router-link来触发。
      编程式导航：写在js函数中，通过this.$router.push(’/home/list/’+id)来触发路径。

<template>
	<div class="box">
		<p>{{message}}</p>
		<ul class="left">
            <li v-for="(item,index) in lists" @click="handle(index)">{{item}}</li>
        </ul>
        <!-- 声明式路由 -->
        <!-- <router-link to="/home/list/1" tag="li">平板</router-link> -->
        <div class="right">
        	<router-view></router-view>
        </div>
        
	</div>
</template>

<script>
	export default {
		name:'Home',
		data(){
			return{
				message:'我是home页',
				lists:["列表","平板","电脑"]
			}
		},
		methods:{
			handle(id){
				//在JS中进行路由跳转：编程式路由
				this.$router.push('/home/list/'+id);
			}
		}
	}
</script>

注：
  1) this.$router.push(path)：此方法将新条目推送到历史堆栈中，因此当用户单击浏览器后退按钮时，它们将被带到先前的URL。
  2) this.$router.replace(path)：它导航时没有按下新的历史记录条目，顾名思义 - 它取代了当前的条目。
  3) this.$router.back()：请求(返回)上一个记录路由。
  4) this.$router.go(-1)：请求(返回)上一个记录路由。
  5) this.$router.go(1)：请求下一个记录路由。