Vue-router

最新推荐文章于 2025-07-19 12:49:59 发布

原创最新推荐文章于 2025-07-19 12:49:59 发布 · 746 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Vue-router

Vue 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了Vue-router的使用，包括入门、配置子路由、传递参数、重定向、别名、过渡动画、404页面处理、路由钩子函数以及编程式导航。通过实例展示了如何在Vue项目中实现页面间的导航、参数传递和状态管理。

一、Vue-router入门:
先看项目的目录结构
在这里插入图片描述
所要写的vue文件放入components中。简单例子如下。新建一个hi.vue

<template>
  <div class="hi">
      {{msg}}
  </div>
</template>  

  export default {
  name: 'hi',
  data () {
    return {
      msg: 'Hi, I am JSPang'
    }
  }
}

在router文件中的index.js文件注册

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import hi from '@/components/hi' //引入编写好的hi.vue 此时文件后缀名字可以省略

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    //配置
    {
    	path: '/hi',  //配置路径
    	name: 'hi',
    	component:hi   //组件
    }
  ]
})

在App.vue文件中引入
router-link制作导航页面上需要有个像样的导航链接，我们只要点击就可以实现页面内容的变化。制作链接需要标签。to：是我们的导航路径，要填写的是你在router/index.js文件里配置的path值，如果要导航到默认首页，只需要写成 to="/"

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

二、Vue-router进阶
vue-router配置子路由
在vue.app书写代码

<router-link to ="/hi">to hi</router-link>
<router-link to ="/hi.hi1">to hi</router-link>//子路由

在compones文件夹中书写子组件。子组件同上。
在父组件中修改代码。
把Hi.vue改成一个通用的模板，加入router-view标签，给子模板提供插入位置。“Hi页面1” 和 “Hi页面2” 都相当于“Hi页面”的子页面，有点像继承关系。我们在“Hi页面”里加入router-view标签

<template>
  <div class="hello">
   <h1>{{msg}}</h1>
  </div>
</template>  
 
 <script>
 export default {
  name: 'hi',
  data () {
    return {
      msg: 'Hi, I am JSPang'
    }
  }
}
</srcipt>

在index.js配置子路由

import Vue from 'vue'   
import Router from 'vue-router'  
import Hello from '@/components/Hello'  
import Hi from '@/components/Hi'
import Hi1 from '@/components/Hi1'
Vue.use(Router)
export default new Router({
  routes: [             
    {                    
      path: '/',        
      name: 'Hello',     
      component: Hello   
    },{
      path:'/hi',
      component:Hi,
      children:[
        {path:'hi1',component:Hi1},
        {path:'hi2',component:Hi2},
      ]
    }
  ]
})

三、Vue-router传递参数
1.使用to传参用router-link标签中的to属性进行传参，需要您注意的是这里的to要进行一个绑定,写成:to。先来看一下这种传参方法的基本语法：

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

这里的to前边是带冒号的，然后后边跟的是一个对象形式的字符串.

name：就是我们在路由配置文件中起的name值。
params：就是我们要传的参数，它也是对象形势，在对象里可以传递多个值。

在src/router/index.js为每个路由配置name

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import hi from '@/components/hi'
import hi1 from '@/components/hi1'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },{
      path:'/hi',
      name:"hi",
      component:hi,
      children:[
        {path:'hi1',name:"",component:hi1},
      ]
    }
  ]
})

在Vue.app中修改路由代码

<router-link  :to"{name:'hi1',params:{username:'张三'}}">hi1</router-link>
<router-link  :to"{name:'HelloWorld',params:{username:'李四'}}">hellovue页面</router-link>

接受参数

$route.params.usernam

2.使用url传递参数
修改index.js中routes中的代码。在配置文件里以冒号的形式设置参数。我们在/src/router/index.js文件里配置路由

{
     path: '/my/:id/:name',
     name: 'HelloWorld',
     component: HelloWorld
   }

App.vue中路由代码修改如下

<router-link to="/my/198/hhh">helloworld页面</router-link>

在HelloWorld页面中取值:

<template>
    <div class="hello">
       <h1>{{msg}}</h1>
       <h1>{{$route.params.id}}</h1>
       <h1>{{$route.params.name}}</h1>
    </div>
</template>

<script>
 export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
 </script>

如下图:
在这里插入图片描述
正则表达式在URL传值中的应用
加入正则需要在路由配置文件里（/src/router/index.js）以圆括号的形式加入。

path:'/params/:Id(\\d+)/:Title',

加入了正则，我们再传递数字之外的其他参数，params.vue组件就没有办法接收到。

四、vue-router的重定向-redirect
1.redirect简单重定向我们只要在路由配置文件中（/src/router/index.js）把原来的component换成redirect参数就可以了。我们来看一个简单的配置。

export default new Router({
  routes: [
    {
      path: '/my/:id/:name',
      name: 'HelloWorld',
      component: HelloWorld
    },{
      path:'/',
      name:"hi",
      component:hi,
      children:[
        {path:'hi1',name:"hi1",component:hi1},
      ]
    },{
    	path:"/red",
    	redirect:"/"
    }
  ]
})
 redirect重定向到"/" 也就是组件hi

在Vue.app中配置

<router-link to="/red">重定向</router-link>

这里我们设置了red路由，但是它并没有配置任何component（组件），而是直接redirect到path:’/’下了，这就是一个简单的重新定向。

2.重定向时传递参数
只需要在ridirect后边的参数里复制重定向路径的path参数就可以了在（/src/router/index.js）文件中配置，如下所示

import HelloWorld from '@/components/HelloWorld'
import hi from '@/components/hi'
import hi1 from '@/components/hi1'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/my/:id/:name',
      name: 'HelloWorld',
      component: HelloWorld
    },{
      path:'/',
      name:"hi",
      component:hi,
      children:[
        {path:'hi1',name:"hi1",component:hi1},
      ]
    },{
    	path:"/red/:id/:name",
    	redirect:"/my/:id/:name"
    }
  ]
})
redirect的路径为helloWord的path而redirect的路径则为自己的path + 参数

Vue.app配置如下

<router-link to="/red/199/eee">重定向</router-link>

页面如图所示
在这里插入图片描述
已经有了一个HelloWorld路由配置，我们在设置一个red的路由重定向，并传递了参数。这时候我们的路由参数就可以传递给HelloWorld.vue组件了。参数接收方法和正常的路由接收方法一样。

五、alias别名的使用
使用alias别名的形式，我们也可以实现类似重定向的效果。首先我们在路由配置文件里（/src/router/index.js）给hi组件起个别名。如下所示

{
      path:'/',
      name:"hi",
      alias:"/h",
      component:hi,
      children:[
        {path:'hi1',name:"hi1",component:hi1},
      ]
  }

配置我们的router-link，起过别名之后，可以直接使用router-link标签里的to属性，进行重新定向。

<router-link  to="/h">alias</router-link>

redirect和alias的区别
redirect:当用户访问/a时，URL 将会被替换成/b，然后匹配路由为/b
alias:/a的别名是/b，意味着，当用户访问/b 时，URL 会保持为/b，但是路由匹配则为/a，就像用户访问/a 一样。
六、路由的过渡动画
页面切换时我们加入一些动画效果，提升我们程序的动效设计。
transition标签想让路由有过渡动画，需要在router-view标签的外部添加transition标签，标签还需要一个name属性。

<transition name="fade">
   <router-view></router-view>
 <transition>

css过渡类名：
组件过渡过程中，会有四个CSS类名进行切换，这四个类名与transition的name属性有关，比如name=”fade”,会有如下四个CSS类名

1.fade-enter:进入过渡的开始状态，元素被插入时生效，只应用一帧后立刻删除。
2.fade-enter-active:进入过渡的结束状态，元素被插入时就生效，在过渡过程完成后移除。
3.fade-leave:离开过渡的开始状态，元素被删除时触发，只应用一帧后立刻删除。
4.fade-leave-active:离开过渡的结束状态，元素被删除时生效，离开过渡完成后被删除

从上面四个类名可以看出，fade-enter-active和fade-leave-active在整个进入或离开过程中都有效，所以CSS的transition属性在这两个类下进行设置。
那我们就在App.vue页面里加入四种CSS样式效果，并利用CSS3的transition属性控制动画的具体效果。代码如下：

.fade-enter {
  opacity:0;
}
.fade-leave{
  opacity:1;
}
.fade-enter-active{
  transition:opacity .5s;
}
.fade-leave-active{
  opacity:0;
  transition:opacity .5s;
}

七、404页面的处理
404页面的设置设置我们的路由配置文件（/src/router/index.js）

{    
    path:"*",
    	component:error
}

在component中新建error.vue

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

<srcipt>
  export default {
  data () {
    return {
      msg: 'Error:404'
    }
  }
</script>

在Vue.app中书写一个错误的路径

<router-link to="/zzzz">error</router-link>

在这里插入图片描述
八、路由中的钩子
一个组件从进入到销毁有很多的钩子函数，同样在路由中也设置了钩子函数。路由的钩子选项可以写在路由配置文件中，也可以写在我们的组件模板中。
路由配置文件中的钩子函数

{
      path: '/my/:id/:name',
      name: 'HelloWorld',
      component: HelloWorld,
      beforeEnter:(to,from,next)=>{
      	console.log('我进入了helloword模板');
        console.log(to);
        console.log(from);
        next();
      }

页面展示如下
在这里插入图片描述
三个参数(to,from,next)展示的信息为

1.to:路由将要跳转的路径信息，信息是包含在对像里边的。
2.from:路径跳转前的路径信息，也是一个对象的形式。
3.next:路由的控制参数，常用的有next(true)和next(false)。

写在模板中的钩子函数

<template>
   <div class="hello">
      {{msg}}
      {{$route.params.id}}
      {{$route.params.name}}
    </div>
 </template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  beforeRouteEnter:(to,from,next)=>{
    console.log("准备进入路由模板");
    next();
  },
  beforeRouteLeave: (to, from, next) => {
    console.log("准备离开路由模板");
    next();
  }
}
</script>

beforeRouteEnter：在路由进入前的钩子函数。
beforeRouteLeave：在路由离开前的钩子函数
九、编程式导航
在业务逻辑代码中需要跳转页面使用编程式导航，顾名思义，就是在业务逻辑代码中实现导航。this. $r o u t e r . g o (- 1) 和 t h i s .$ router.go(1)这两个编程式导航的意思是后退和前进，功能跟我们浏览器上的后退和前进按钮一样，这在业务逻辑中经常用到。比如条件不满足时，我们需要后退。router.go(-1)代表着后退，我们可以让我们的导航进行后退，并且我们的地址栏也是有所变化的。
在App.vue文件里加入一个按钮，按钮并绑定一个goback( )方法。<button @click=“goback”>后退在script模块中写入goback()方法，并使用this.$router.go(-1),进行后退操作。

<script>
export default {
  name: 'app',
  methods:{
    goback(){
      this.$router.go(-1);
    }
  }
}
</script>

下述代码作用于跳转，比如我们判断用户名和密码正确时，需要跳转到用户中心页面或者首页，都用到这个编程的方法来操作路由。

this.$router.push("/xxx")

实例：在helloword.vue模板中书写先编写一个按钮，在按钮上绑定goHome( )方法。在srcipt中编写goHome()方法

<template>
   <div class="hello">
     {{ msg }}
    {{$route.params.id}}
    {{$route.params.name}}
    <button @click="goHome">回到首页</button>
    </div>
 </template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  beforeRouteEnter:(to,from,next)=>{
    console.log("准备进入路由模板");
    next();
  },
  beforeRouteLeave: (to, from, next) => {
    console.log("准备离开路由模板");
    next();
  },
  methods:{
  	goHome(){
  		this.$router.push("/")
  	}
  }
}
</script>