vue-router 的基本使用

版权声明：本文为博主原创文章，转载时请附上链接，未经允许不得用于盈利。 https://blog.csdn.net/qq_33718889/article/details/88665216

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)：请求下一个记录路由。