vue-router个人总结

最新推荐文章于 2021-06-05 18:37:50 发布

原创最新推荐文章于 2021-06-05 18:37:50 发布 · 215 阅读

0 ·

CC 4.0 BY-SA版权

VUE.js 专栏收录该内容

45 篇文章

订阅专栏

本文详细介绍Vue Router的安装、配置及使用方法，包括路由组件、子路由、参数传递、多路由区域及重定向等核心概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：

vue-router是我们进行实际vue开发中一定会涉及到的内容。

vue-router实际上就是SPA(单页应用)的路径管理器，也就是webapp的连接路径管理系统。

在SPA中不使用<a>标签的原因是因为，vue都是单页应用，相当于只有一个主的index.html页面，所以<a>标签是不起作用的，必须使用vue-router来进行管理。

安装vue-router：

1.在构建vue-cli中选择安装vue-router

2.使用命令npm install vue-router --save-dev或者cnpm install vue-router --save-dev

说明：save是将安装保存到package.json中

vue-router关键文件：

1. ./src/main.js：项目的入口文件

2. ./src/App.vue：路由文件，一般可作为导航首页

3. ./src/router/index.js：路由核心文件，配置所有路由

4. ./src/components/*.vue：路由文件，网站的各种组件内容都是由.vue完成的

之后我们关于项目的编写，主要就是创建.vue文件、修改导航文件（App.vue）、修改路由配置文件（index.vue）

（题外话：如果您了解过数据绑定mvvm，在我的理解下，相当于数据绑定的概念，其中，.vue文件就相当于数据，app.vue文件相当于视图，而index.vue就相当于数据与页面之间的桥梁，也就是binding，index.vue将数据（*.vue）和视图（app.vue）联系了起来。）

vue-router的相关语法

如果能够理解了*.vue文件，app.vue文件与index.vue文件之后，剩下的所有知识点，都是语法知识点，因此汇总如下

增加一个路由和一个组件页面

创建页面：巧妇难为无米之炊，首先得创建页面，才能进行路由操作。

在components文件夹下创建路由页面：newpage.vue

所有的vue文件都是由三部分组成：<template>、<script>、<style>

template：模板，页面的具体内容

script：编辑页面的数据或者业务逻辑(如果关于export不是很清楚的童鞋，可以查看一下vue的模块机制，在这里贴出两篇比较简单易懂的文章https://www.cnblogs.com/ppJuan/p/7151000.html 和 https://www.jianshu.com/p/c359b7d35107)

style：页面的样式

如下：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
<script>
export default {
  name: 'hi',
  data () {
    return {
      msg: 'Hi, I am JSPang'
    }
  }
}
</script>
<style scoped>
<!--scoped表示该样式只在该模板下起作用-->
</style>

增加路由：修改index.js文件

1 .引入组件页面：import newpage from '@/components/newpage'

2 .配置组件页面：在router/index.js文件的routes[]数组中，新建一个对象，代码如下

    {
          path:'/newpage',
          name:'newPage',
          component:newpage 
    }

目前所有的配置文件如下：

import Vue from 'vue'   //引入Vue
import Router from 'vue-router'  //引入vue-router
import Hello from '@/components/Hello'  //引入根目录下的Hello.vue组件
import newpage from '@/components/newpage' 
Vue.use(Router)  //Vue全局使用Router
export default new Router({
  routes: [              //配置路由，这里是个数组
    {                    //每一个链接都是一个对象
      path: '/',         //链接路径
      name: 'Hello',     //路由名称，
      component: Hello   //对应的组件模板
    },{
      path:'/newpage',
      name:'newPage',
      component:newpage 
    }
  ]
})

修改导航文件：

使用router-link标签制作导航。router-link类似于html中的<a>标签。

有关router-link标签的具体内容，查看https://router.vuejs.org/zh/api/

修改app.vue文件中的template标签，添加router-link.

<p>导航 ：
   <router-link to="/">首页</router-link>
   <router-link to="/newpage">新页面</router-link>
<!--在这里的to中的内容，应该与index.js中对应的路由保持一致-->
</p>

配置子路由

在拥有子路由的父路由页面的template中添加路由<router-view>标签

在路由配置页面index.js对应的父路由配置对象中，添加children:[]数组属性，数组中防止子路由的配置

<!--这是父路由组件内容-->
<template>
  <div class="father">
    <h1>{{ msg }}</h1>

    <!--添加子路由view-->
    <router-view class="children"></router-view>

  </div>
</template>
<script>
export default {
  name: 'father',
  data () {
    return {
      msg: 'Hi, I am father'
    }
  }
}
</script>
<style scoped>
</style>

index.js中的配置

import Vue from 'vue'   
import Router from 'vue-router'  
import Hello from '@/components/Hello'  
import father from '@/components/father' 
import child1 from '@/components/child1' 
import child2 from '@/components/child2' 
Vue.use(Router) 
export default new Router({
  routes: [             
    {                    
      path: '/',        
      name: 'Hello',     
      component: Hello   
    },
    {
      path:'/father ',
      component:father ,
      children:[
            {
                path:'/',
                name:'father',//这是父路由的name，必须在这里配置，在上边配置无效
                component:father
            },
            {
                path:'/child1',
                name:'child1',
                component:child1
            },
            {
                path:'/child2',
                name:'child2',
                component:Child2
            },
      ]
    }
  ]
})

参数传递：

1.使用name传递

· 在路由文件src/router/index.js里配置name属性。

· 模板里(src/App.vue)用$route.name的形势接收，比如直接在模板中显示

2.通过标签中的to传递

<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>

3.利用url传递参数

:冒号的形式传递参数

//在index.js文件中：

{
    path:'/params/:newsId/:newsTitle',
     component:Params
}


//在组件vue文件中
<template>
    <div>
        <h2>{{ msg }}</h2>
        <p>新闻ID：{{ $route.params.newsId}}</p>
        <p>新闻标题：{{ $route.params.newsTitle}}</p>
    </div>
</template>
<script>
export default {
  name: 'params',
  data () {
    return {
      msg: 'params page'
    }
  }
}
</script>

//app.vue文件中
<router-link to="/params/198/jspang website is very good">params</router-link>

正则表达式在url传值中的应用

path:'/params/:newsId(\\d+)/:newsTitle',

一般会使用to传参

单页面多路由区域操作

单页面多路由区域操作即在一个页面里我们有2个以上<router-view>区域

<router-view>详情https://router.vuejs.org/zh/api/#router-link

<router-view ></router-view>
 <router-view name="left" style="float:left;width:50%;background-color:#ccc;height:300px;"></router-view>
 <router-view name="right" style="float:right;width:50%;background-color:#c0c;height:300px;"></router-view>

我们通过配置路由的js文件，来操作这些区域的内容。

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      components: {
        default:Hello,
        left:Hi1,
        right:Hi2
      }
    },{
      path: '/Hi',
      components: {
        default:Hello,
        left:Hi2,
        right:Hi1
      }
    }
  ]
})