Vue简单实例——路由1

Error_exception_worn

已于 2022-11-09 14:45:36 修改

阅读量241

点赞数 1

文章标签： vue.js javascript 前端

于 2022-11-08 23:41:06 首次发布

本文链接：https://blog.csdn.net/hssjsh/article/details/127758790

版权

简单介绍

路由是什么：

在生活中，路由就是一组key和value的对应关系，并且一个路由器可以用来管理多个路由，而在Vue中，路由的主要用途就是在单页面应用中实现页面的切换。

单页面应用（SPA）：

这个概念是相对与多页面应用而论的，多页面应用就是我们以传统的方式开发的Web应用，创建很多的界面，然后在不同的页面中显示不同的界面，在需要的时候点击超链接在不同的页面中进行跳转。这样做有一些不好的地方就是每次页面的刷新都需要请求网络，如果网络不好的时候就会卡顿很长时间，而且在页面切换的时候会有比较强的闪烁，用户体验比较差，所以在我们通过Vue开发的应用就是单页面的应用，可以看到在Vue的脚手架里，用来显示的HTML文件只有一个，而显示什么样的内容由组件来决定。

一个单页面主要有以下几个特点：

1.整个应用只有一个HTML页面

2.点击页面中的导航链接不会刷新网页，只会做页面的局部刷新

3.数据需要通过Ajax请求获取

简单来说，单页面就是将多页面中的页面换成了组件

路由的分类：

在Vue中，路由分为前端路由和后端路由，而区分这两者的关键在于value的类型，在之前我们说过，路由就是一组kay和value的映射关系，这一点非常重要，我们后面也会反复的提起：

前端路由：即当value的类型是component时，这个路由就是一个前端路由，主要用于显示界面。前端路由的工作原理是，当我们访问一个路由的kay时，路由器就会寻找到对应的组件，并将组件的内容显示在界面中。

后端路由：即当value的类型是function时，这个路由就是一个后端路由，主要用于处理数据。

后端路由的工作原理是，当我们访问一个路由的key时，路由器就会寻找对应的方法，并返回处理后的数据。

基本路由的实现：

实现路由的前提，就是将我们在多页面应用中在页面中显示的内容提取到一个组件中

基本步骤：

首先：需要下载路由的依赖，使用命令行下载：

npm i vue-router@3

这里需要说明一下，现在通npm下载的router如果不指定版本号，默认是下载最新版的4版本，而最新的版本在Vue2的脚手架中是不能使用的，并且会报错，而我用的就是Vue2的脚手架，所以这里就指定用3版本的router。

在安装完成之后，就需要在main.js中引入并应用一下这个依赖库，在应用了这个依赖库之后，就可以在创建Vue实例的时候添加一个新的属性：router，属性值就是一个router对象

import Vue from 'vue'
import App from './App.vue'
//在main.js中引入Vue-router依赖，也就是我们刚才下载的依赖包
import VueRouter from "vue-router";
//引入路由器实例对象,这个实例对象用来给Vue实例中的router对象传递参数
import router from "@/router/index.js";

Vue.config.productionTip = false

//然后使用use方法应用一下这个插件
Vue.use(VueRouter)

new Vue({
  render: h => h(App),
  beforeCreate() {
    Vue.prototype.$bus = this
  },
  //在引入并使用vue-router插件之后,我们可以在Vue中设置一个新的节点叫做router,用来让路由器就位并且开始工作
  router:router
}).$mount('#app')

在完成这一步之后，在正式开始我们路由的设置之前，需要做一些前提动作，首先就是在src下面创建一个router文件夹，在里面创建一个index.js文件，这个文件就是我们的路由器，用来分配调用不同的路。然后再创建一个跟router平级的page文件夹，里面用来存放我们的路由组件。接下来就开始正式的创建一个路由了。

我们之前说过，实现路由的前提就是将要显示的界面分解成一个单独的组件，所以我们首先要准备要展示的页面组件，所有的路由组件全部都在page文件夹中进行创建，这里我们就简单的写一些内容代替：

路由组件1：

<!--用来进行显示内容的路由组件-->
<template>
  <h1>JavaScript教程</h1>
</template>

<script>
export default {
  name: "router-one"
}
</script>

<style scoped>

</style>

路由组件2：

<!--用来进行显示内容的路由组件-->
<template>
  <h1>Vue教程</h1>
</template>

<script>
export default {
  name: "router-one"
}
</script>

<style scoped>

</style>

在完成路由组件的准备之后，接下来就是

我们来编辑router文件夹下面的index.js文件，这个文件就相当于我们整个应用的的路由器，在这个文件中可以配置路由规则，在我们的单页面应用中，所有的路由组件全部都是在这里面进行引入和调用的，也就是说，我们在整个使用过程中，都不会去以标签的形式去使用路由组件：

//该文件专门用于创建整个应用的路由器
//首先导入vue-router的插件
import VueRouter from "vue-router";
//引入用来显示的组件
import routerOne from "@/page/router-one";
import routerTwo from "@/page/router-two";

//创建一个路由实例,在实例里面传入一个参数,该参数用于设定路由规则
export default new VueRouter({
    //这里的routers对应的就是一个路由器可以管理很多的路由
    routes:[
        //既然是可以管理很多的路由,那么这个路由器里面就可以放置很多的路由对象
        {
            path:'/one',//这里的path属性就是对应的kay
            component:routerOne//component就是对应的value,并且也表明了value的类型,属于是前端路由
        },
        {
            path:'/two',
            component:routerTwo
        }
    ]
})

在编辑完成路由的规则之后，就是开始设置我们的路由规则，也就是需要配置我们的router下面的index.js文件了，这个文件我们以后直接成为路由器，在路由器中需要做下面几件事：

1.引入路由插件

2.引入路由组件

3.创建并暴露一个路由实例对象，这个对象有一个参数，参数就是配置的路由信息

4.在参数中，首先就是一个routes的数组，在数组中配置多个路由对象，在对象中设置路由的路径和对应的组件

//该文件专门用于创建整个应用的路由器
//首先导入vue-router的插件
import VueRouter from "vue-router";
//引入用来显示的组件
import routerOne from "@/page/router-one";
import routerTwo from "@/page/router-two";

//创建一个路由实例,在实例里面传入一个参数,该对象的参数用于设定路由规则
export default new VueRouter({
    //这里的routers对应的就是一个路由器可以管理很多的路由
    routes:[
        //既然是可以管理很多的路由,那么这个路由器里面就可以放置很多的路由对象
        {
            path:'/one',//这里的path属性就是对应的kay
            component:routerOne//component就是对应的value,并且也表明了value的类型,属于是前端路由
        },
        {
            path:'/two',
            component:routerTwo
        }
    ]
})

在设置完这些前提条件之后，剩下的就是设置显示的主界面了，这里我们的主界面就选择在App组件根节点中设置。设置主界面的思路是这样的，首先回想一下在多页面应用中，我们要想实现页面之间的跳转是不是使用了一个a标签，然后用href属性定义了页面的地址，然后点击超链接的方式跳转网页。其实在单页面应用中也是一样的，只是把a标签换成了一个全新的标签：<router-linlk>并且把href属性换成了to，to属性的值是我们在路由器文件中设置的path的值，这两个值要保持一致才能实现路由的跳转。并且添加了一个新的标签：<router-view>用来定位组件显示的位置，这个标签的功能就相当于插槽中的slot标签。具体的代码实现如下：

<template>
  <div id="app">
    <table>
      <tr class="list-groups">
<!--        使用router-link代替a标签进行路由之间的切换,to表示要到达的地址,这里的to后面的地址要跟路由配置文件中的path保持一致才能显示对应的组件内容-->
        <td> <router-link to="/one" class="list-group-item active">JavaScript教程</router-link> </td>
        <td> <router-link to="/two" class="list-group-item">Vue课程</router-link> </td>
      </tr>
      <tr>
        <td colspan="2">
<!--          这个标签的含义就是将路由组件的内容渲染到这个位置,有点类似于插槽中的slot占位标签-->
          <router-view></router-view>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {

  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 60px;
}
table{
  border: 1px solid black;
}
td{
  border: 1px solid black;
  width: 200px;
  height: 50px;
}
</style>

在所有上面的内容都设置完成后，就实现了如下的效果：

值得注意的地方是除了组件根据点击不同的链接进行不同的渲染，还有一个地方是导航栏，可以看到我们在切换组件的时候，网页全程没有刷新，导航栏中的#号后面的内容表示路由地址，并且在整个网页地址中只有路由地址是变化的

嵌套路由（多级路由）：在一些场景中，我们可能需要使用多级路由，这时候就需要使用到路由的嵌套来完成

路由的嵌套表现在路由器文件中设置路由器配置的时候，除了path和component之外，添加了一个新的属性children，children属性的值是一个数组，可以用来设置多个子路由的地址和组件：

index.js（路由器文件）：

//该文件专门用于创建整个应用的路由器
//首先导入vue-router的插件
import VueRouter from "vue-router";
//引入用来显示的组件
import routerOne from "@/page/router-one";
import routerTwo from "@/page/router-two";
//嵌套路由的组件
import routerNext from "@/page/router-next";

//创建一个路由实例,在实例里面传入一个参数,该对象的参数用于设定路由规则
export default new VueRouter({
    //这里的routers对应的就是一个路由器可以管理很多的路由
    routes:[
        //既然是可以管理很多的路由,那么这个路由器里面就可以放置很多的路由对象
        {
            path:'/one',//这里的path属性就是对应的kay
            component:routerOne//component就是对应的value,并且也表明了value的类型,属于是前端路由
        },
        {
            path:'/two',
            component:routerTwo,
            //在第二个路由组件中设置一个children属性,属性的值就是嵌套路由的地址和组件
            children:[
                {
                    path:'next',//嵌套路由的path一定不要写反斜杠,写了就没有效果!!!!
                    component:routerNext//最后就是嵌套路由的显示组件
                }
            ]
        }
    ]
})

嵌套路由组件的内容：

<template>
  <h3>嵌套路由的内容</h3>
</template>

<script>
export default {
  name: "router-next"
}
</script>

<style scoped>

</style>

父路由组件的内容：

<!--用来进行显示内容的路由组件-->
<template>
  <div>
    <h1>Vue教程</h1>
<!--    因为是在夫路由组件中显示内容,所以路由的触发标签和显示标签都放在了夫路由组件中-->
    <router-link to="/two/next">嵌套路由</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "router-one"
}
</script>

<style scoped>

</style>

在完成了上面的内容之后，如果没有报错，你将会看到以下的内容：

同样的，我们的注意点除了不同组件的加载，还需要注意导航栏的变化，可以发现在我们点击嵌套路由的标签的时候，导航栏也发生了多级目录的变化。

命名路由：就是给路由一个名字：

在我们使用路由的时候，可以给路由取一个名字，用来标识这个路由，在我们写路径的时候，可以用名字来代替路径属性值，这样做可以将嵌套路由的访问路径简化。

路由器文件的内容：

//该文件专门用于创建整个应用的路由器
//首先导入vue-router的插件
import VueRouter from "vue-router";
//引入用来显示的组件
import routerOne from "@/page/router-one";
import routerTwo from "@/page/router-two";
//嵌套路由的组件
import routerNext from "@/page/router-next";

//创建一个路由实例,在实例里面传入一个参数,该对象的参数用于设定路由规则
export default new VueRouter({
    //这里的routers对应的就是一个路由器可以管理很多的路由
    routes:[
        //既然是可以管理很多的路由,那么这个路由器里面就可以放置很多的路由对象
        {
            path:'/one',//这里的path属性就是对应的kay
            component:routerOne//component就是对应的value,并且也表明了value的类型,属于是前端路由
        },
        {
            path:'/two',
            component:routerTwo,
            //在第二个路由组件中设置一个children属性,属性的值就是嵌套路由的地址和组件
            children:[
                {
                    name:'next',
                    path:'next',
                    component:routerNext//最后就是嵌套路由的显示组件
                }
            ]
        }
    ]
})

父路由组件中的内容：

<!--用来进行显示内容的路由组件-->
<template>
  <div>
    <h1>Vue教程</h1>
<!--    因为是在夫路由组件中显示内容,所以路由的触发标签和显示标签都放在了夫路由组件中-->
<!--    在to属性的后面直接写路由的名字,也可以达到同样的效果-->
    <router-link :to="{name:'next'}">嵌套路由</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "router-one"
}
</script>

<style scoped>

</style>