【Vue学习总结】16.Vue中的路由以及默认路由跳转

接上篇《15.父子组件主动获取数据和方法、非父子组件获取数据和方法》

上一篇我们讲解了非父子组件如何进行数据和方法的传递，本篇我们来继续学习vue中的路由以及默认路由跳转。
本系列博文使用的Vue版本：2.6.11

一、什么是路由

我们之前开发的组件中，有两个子组件，App.vue的根组件，挂载了这两个子组件，并通过自定义标签引用了它们：

<template>
  <!-- vue的模板里面，所有的内容都需要被一个根节点包裹起来 -->
  <div id="app">
    <h2>{{msg}}</h2>
    <v-hello></v-hello>
    <br/><hr/>
    <v-news></v-news>
  </div>
</template>

<script>
import Hello from './components/HelloWorld.vue'
import News from './components/News.vue'
export default {
  name: 'app',
  data () {
      return {
        msg: '你好，vue'
      }
  },
  components:{
    'v-hello':Hello,
    'v-news':News
  }
}
</script>
<style>
</style>

关系图：

上面分别引用了首页以及新闻页两个子组件。这都是我们手动去做的。

而路由则是可以满足让根组件自动去挂载下面的子组件，例如我们需要实现点击那个组件，就自动挂载那个组件，点击另一个，就把上一个组件卸载，挂载这个组件，这里就需要使用到“路由”的机制。

按照官方的解释，Vue的路由允许我们通过不同的URL访问不同的内容，可以实现多视图的单页Web应用（single page web application，SPA）。

这里的单页面我们可以理解为，使用一个主页面，就可以通过链接自由变换页面的内容（注意是内容，不是直接刷新页面，类似于异步更新组件）。

下面我们通过实例实现一个路由的机制。

二、如何使用路由

在Vue中为我们提供了一个“vue-router”的插件，该插件就可以帮我们实现路由的效果。
如何使用呢？我们来看一下。

1、安装并引入vue-router
首先我们在项目下使用npm install指令来安装vue-router插件：

npm install vue-router --save

然后在全局js中引入vue-router：

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

Vue.use(Router)

2、配置路由
我们要按照配置规范，来配置访问不同页面的时候，加载不同组件的路由规则，分为以下几步：
（1）创建组件并引入组件
顾名思义，就是将我们准备进行路由的子组件进行实例化，即“new 它！”。
例如这里定义了两个准备挂载的组件对象：

const Foo = {template:'<div>foo</div>'};
const Bar = {template:'<div>bar</div>'};

如果是编写好的组件页面，直接import引入，后面就可以直接用：

import HelloWorld from '@/components/HelloWorld'

像这样第二步就可以直接用HelloWorld对象了。

（2）定义路由
这里就是配置具体的路由规则，每一个路由映射一个组件，即key是访问路由，value是路由的组件对象，最终封装为一个routes数组：

const routes = [
    {path:'/foo',component: Foo},
    {path:'/bar',component: Bar},
    {path:'/helloWorld',component: HelloWorld}
]

（3）实例化Router
将刚才的routes封装为一个Router对象，即这个routes作为一个属性，封装为一个vue-router组件对象：

const router = new Router({
    routes
});

（4）创建和挂载根实例
将刚才实例化的Router对象，挂载到Vue实例的router属性上，vue就会按照这个路由对象配置的路由标准，进行自动路由页面了：

const app = new Vue({
    router
}).$mount("#app");

（5）引用并访问路由内容
① 直接通过路径访问挂载
如果我们想通过根组件直接访问路由的子组件内容，可以在跟组件的页面中，直接通过“<router-view></router-view>”标签，就可以加载根组件内容，前提是需要在页面上输入子组对应的path路径，该组件会自动加载主路径后面跟着的子路径path对应的页面内容。例如想加载"foo"组件内容，就访问“http://localhost:8080/#/foo”即可。

② 通过超链接挂载
通过“router-link”标签，我们可以像点击超链接一样，在<router-view>区域显示路由过来的子组件的内容：

<router-link to="/foo">Foo</router-link>
<router-link to="/bar">Bar</router-link>

其中的to的值，就是在路由中定义的path的值。

我们下面敲一下实例来测试一下。

三、使用路由实现自动挂载

我们首先打开之前的工程，在下面安装vue-router:

然后在工程中创建一个router文件夹，然后创建一个router.js文件（如果工程中自动生成了一个router/index.js，可以直接用，我们这里删除它自己写），用来创建和暴露Router对象：

//1、创建组件并引入组件
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import News from '@/components/News'

Vue.use(Router)

//2、定义路由
const routes = [
  {path:'/helloWorld',component: HelloWorld},
  {path:'/news',component: News}
]

//3、实例化Router
const router = new Router({
  routes
});

//4、暴露组件，在mian.js中引入该router
export default router

然后我们在全局mian.js中，引入刚刚暴露的router对象，并创建和挂载根实例：

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

/* 创建和挂载根实例 */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

在App.vue根组件中，我们先把之前的手动引入去掉，之加入一个“<router-view>”标签对：

<template>
  <div id="app">
    <h2>{{msg}}</h2>
    <hr/>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
      return {
        msg: '你好，vue'
      }
  }
}
</script>

<style>
</style>

此时启动工程后,我们通过浏览器，访问定义的路由地址，就可以看到相应的内容：

说明我们配置的路由生效了。此时我们如果想通过超链接控制路由的内容，添加；两个“router-link”标签即可：

<template>
  <div id="app">
    <h2>{{msg}}</h2>
    <router-link to="/helloWorld">首页</router-link>
    <router-link to="/news">新闻</router-link>
    <hr/>
      <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
      return {
        msg: '你好，vue'
      }
  }
}
</script>

<style>
</style>

效果：

可以看到点击链接后，子组件内容就渲染到了router视图区域。

细心的童鞋会发现，直接访问默认路径时，我们看不到原来的Hello以及News组件的内容：

这是因为我们没有配置默认的路由，如果我们想在访问根组件的时候，默认加载路由内容，我们在定义路由配置时，定义一个空路径‘/’或默认统配路径‘*’，指定一个组件即可：

const routes = [
  {path:'/helloWorld',component: HelloWorld},
  {path:'/news',component: News},
  {path:'/',component: HelloWorld}
]

这里我们空路径‘/’时，默认指定加载的组件为HelloWorld组件。

再次访问默认页面时，就挂载了指定的默认组件：

以上就是基本的简单路由操作，后续我们会使用路由来实现一个动态导航功能，以及学习路由更加深入的知识。

参考：
《IT营：itying.com-2018年Vue2.x 5小时入门视频教程》

转载请注明出处：https://blog.csdn.net/acmman/article/details/109566202