Vue学习笔记6 Vue-router笔记总结

最新推荐文章于 2022-10-24 11:51:20 发布

会左勾拳的螳螂

最新推荐文章于 2022-10-24 11:51:20 发布

阅读量1k

点赞数 2

分类专栏： vue.js vue-router 文章标签： vue

本文链接：https://blog.csdn.net/RuiHe_pan/article/details/108255433

版权

vue.js 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

vue-router

1 篇文章 0 订阅

订阅专栏

文章目录

前言
一、学习Vue-router准备
二、Vue-router学习
总结

前言

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。本文将轻松带你入门vue router、掌握如何配置子路由，如何进行参数传递等

一、学习Vue-router准备

本教程使用代码编写工具是VSCode
具备一定的vue语法基础
对npm/cnpm(包管理工具)有所了解
熟悉vue-cli

二、Vue-router学习

1.安装Vue-router

如看过我上一篇文章的博友就知道，我在上一章博文（Vue学习笔记5 Vue-cli入门教程）在配置vue-cli的时候就已经安装了vue-router，这里建议大家先看上一篇文章创建并配置好vue-cli项目。
如果你已经创建完vue-cli项目了但是配置的时候忘记安装vue-router了那就打开终端输入输入如下命令：

npm install vue-router --save

Tip：在执行这句命令之前要先cd进入package.json所在的目录

2.Vue-router解读

Vue-router的使用首先要在“components”下.vue文件，在里面创建一个模板，如下图

在这里插入图片描述
其次要在router下的index.js文件中进行配置，包括导入模板，配置路由，如下图

最要在页面使用<router-view/>进行引用，默认在src下有一个App.vue文件，上面提到的模板就是在里面进行使用的。如下图

3.Vue-router配置子路由

第一步
首先我们要先在components文件下创建如下文件

相应的代码如下

Hi.vue （作为父级）

<template>
    <div>
        <h2>{{msg}}</h2>
        <router-view></router-view>
    </div>
</template>

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

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

Hi1.vue （作为子级）

<template>
    <div>
        <h2>{{msg}}</h2>
    </div>
</template>

<script>
export default {
  name: 'Hi1',
  data () {
    return {
      msg: 'I am Hi1'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

Hi2.vue （作为子级）

<template>
    <div>
        <h2>{{msg}}</h2>
    </div>
</template>

<script>
export default {
  name: 'Hi2',
  data () {
    return {
      msg: 'I am Hi2'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

第二步
我们需要在index.js中进行配置，如下

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hi from '@/components/Hi'
import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/Hi',
      component: Hi,
      children:[
        {path:'/',name: 'HelloWorld/Hi',component:Hi},
        {path:'Hi1',name: 'HelloWorld/Hi/Hi1',component:Hi1},
        {path:'Hi2',name: 'HelloWorld/Hi/Hi2',component:Hi2}
      ]
    }
  ]
})

Tip：含有子路由的路由应该不要配置name，否则会有警告。

第三步
在App.vue里使用<router-link></router-link>做个导航进行验证，如下

<template>
  <div id="app">
    
    <img src="./assets/logo.png">
    <div>
      <router-link to="/">首页</router-link>  |
      <router-link to="/Hi">Hi页</router-link>  |
      <router-link to="/Hi/Hi1">Hi页1</router-link>  |
      <router-link to="/Hi/Hi2">Hi页2</router-link>
    </div>
    <router-view/>
  </div>
</template>

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

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

效果如下
在这里插入图片描述

4.Vue-router参数传递

4.1 name传参
在App.vue的里写个p标签在里面用插值法直接进行使用路由中的name值

<p>{{ $route.name }}</p>

效果如下
在这里插入图片描述

4.2 <router-link></router-link>传参
参照如下代码进行修改<router-link></router-link>里的代码

<router-link :to="{name:'Hi1', params:{username:'panruihe', id:'666666'}}">Hi页1</router-link>

Tip: 这个里传递了两个参数（username、id）
效果如下
在这里插入图片描述

5.Vue-router单页面多路由

什么是单页面多路由，即在一个页面中由多个路由模板，例如我们做网站时需要有顶部和侧边栏以及内容区，而这三个部分用三个路由模板做成，那怎么在一个页面里面显示多个路由？先上效果
在这里插入图片描述

第一步先在components文件夹下建三个模板，组件名称自定义，这里定义为header.vue、left.vue、main.vue。
模板代码如下

// header.vue
<template id="header">
    <div>
        <h3>头部区域</h3>
    </div>
</template>

//left.vue
<template id="left">
    <div>
        <h3>侧边栏区域</h3>
    </div>
</template>

//main.vue
<template id="main">
    <div>
        <h3>主体区域</h3>
    </div>
</template>

第二步使用模板
在App.vue文件中使用<router-view></router-view>显示模板，代码如下

<div id="app">
    <router-view name="header" style="float: left;width:100%;background:#ccc;height:100px;"></router-view>
    <router-view name="left" style="float: left;width:30%;background:#c1c;height:600px;"></router-view>
    <router-view name="main" style="float: left;width:70%;background:#c0b145;height:600px;"></router-view>
  </div>

第三步配置路由
在index.js中导入组件并配置路由，如下

import Vue from 'vue'
import Router from 'vue-router'
import header from '@/components/header'
import left from '@/components/left'
import main from '@/components/main'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      components: {
        'header': header,
        'left': left,
        'main': main
      }
    }
  ]
})

6.Vue-router URL传递参数

用URL传递newsId和newsTitle这两个参数

第一步
在components下新建模板（params.vue）, 参考代码如下：
用插值法显示newsId和newsTitle参数

<template>
    <div>
        <h2>{{msg}}</h2>
        <p>newsId：{{ $route.params.newsId}}</p>
        <p>newsTitle：{{ $route.params.newsTitle}}</p>
    </div>
</template>

<script>
export default {
  name: 'params',
  data () {
    return {
      msg: 'params pages'
    }
  }
}
</script>

第二步在index.js中导入params模板并配置路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import params from '@/components/params'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/params/:newsId(\\d+)/:newsTitle',
      name: 'params',
      component: params
      
    }
  ]
})

Tip: 用:绑定参数，并且可以直接在参数后面使用()填写正则，如:newsId(\\d+)

第三步在App.vue中使用<router-link></router-link>填写URL

<router-link to="/params/156/this newsTitl">Hi页</router-link>

效果

7.Vue-router 重定向（redirect）

7.1 无参重定向
第一步在index.js中配置路由，参考代码如下：

	{
      path:'/goHome',
      redirect:'/'
    }

第二步在App.vue中使用，参考代码如下

<router-link to="/">goHome</router-link>

7.2 带参重定向
第一步在index.js中配置路由，参考代码如下：

	{
      path:'/goParams/:newsId(\\d+)/:newsTitle',
      redirect:'/params/:newsId(\\d+)/:newsTitle'
    }

第二步在App.vue中使用，参考代码如下

<router-link to="/params/123/I am Rui">params</router-link>

8.Vue-router 过度动画（transition）

web前端工程师除了要实现页面功外很重要的一点还要把页面做的美观大气，下面就介绍vue自带的过度动画组件<transition></transition>

第一步为<router-view/>添加<transition></transition>组件包裹
参考代码如下

	<!-- 动画过渡组件 -->
    <transition name="fade" mode="out-in">
      <router-view/>
    </transition>

Tip: name属于必填属性，mode有效值为out-in和in-out

第二步在<style></style>里写css样式

/* 进入过度的开始状态 */
.fade-enter{
  opacity: 0;
}
/* 进入过渡的结束状态 */
.fade-enter-active{
  transition: opacity .5s;
}
/* 离开过渡的开始状态 */
.fade-leave{
  opacity: 1;
}
/* 离开过渡的结束状态 */
.fade-leave-active{
  opacity: 0;
  transition: opacity .5s;
}

Tip: 这里需要注意，类选择器的名称要以前面<transition></transition>的name值为前缀，如本例中<transition name="fade" mode="out-in">，所以样式的类选择器要以fade-为前缀

9.Vue-router mode(如何去掉浏览器url中的#号 )

在index.js中添加一个 mode:'history',即可，写在路由（routes）前面，用逗号隔开

10.Vue-router 404页面处理

第一步在components文件下创建404模板（Error.vue）

<template>
    <div>
        <h2>{{msg}}</h2>
    </div>
</template>

<script>
export default {
  name: 'Hi',
  data () {
    return {
      msg: '404 页面不存在 '
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

第二步在index.js中导入模板配置路由

//导入组件
import Error from '@/components/Error'

	//配置路由 * 代表404
	{
      path:'*',
      component:Error
    }

最后一步在App.vue 里的 template 下添加<router-view/>，然后在浏览测试
效果如下

11.Vue-router 钩子函数

Vue-router 钩子函数有两种写法

第一种写法写在index.js 的路由配置中
参考代码如下

	{
      path: '/params/:newsId(\\d+)/:newsTitle',
      name: 'params',
      component: params,
      // 进入路由前
      beforeEnter:(to,from,next)=>{
        console.log(to);
        console.log(from);
        // 跳转规则 
        // 括号里不填任何参数 直接跳转
        // 括号里填写bool值 true表示可以跳转  false表示不允许跳转
        // 括号里填写路径 跳转到该路径 如next({path:'/'}) 跳转回首页
        next();
      }
    },

第二种写法
写在模板的<script>中，直接用都好隔开写在data的后面即可，参考代码如下

 beforeRouteEnter:(to,from,next)=>{
    console.log("准备进入params路由模板");
    next();
  },
  beforeRouteLeave:(to,from,next)=>{
    console.log("准备离开params路由模板");
    next();
  }

12.Vue-router 编程式导航

什么是编程式导航呢？比如我们需要实现前进后退以及跳转到具体某个页面，这种不直接使用<router-link></router-link>直接进行跳转的都称之为编程式导航。
找一个现有的App.vue（本文前面已经做了很多例子，App.vue中还有一个导航，这样便于验证）中的<template></template>添加如下代码

	<div>
      <button @click="goBack">后退</button>
      <button @click="goGo">前进</button>
      <button @click="goHome">前进</button>
    </div>

修改<script></script>中的代码

<script>
export default {
  name: 'App',
  methods:{
    goBack(){
      this.$router.go(-1);
    },
    goGo(){
      this.$router.go(1);
    },
    goHome(){
      this.$router.push('/');
    }
  }
}
</script>

总结

有问题欢迎留言共同讨论学习

会左勾拳的螳螂

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
Vue学习笔记6 Vue-router笔记总结

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。本文将轻松带你入门vue router、掌握如何配置子路由，如何进行参数传递，单页面多路由，URL传参，redirect重定向，transition 过渡动画组件，404页面处理，mode，钩子函数，编程式导航。
复制链接

扫一扫

专栏目录