首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue vue-router页面跳转

Vue通过vue-router实现页面跳转的全过程

2024-04-29 09:55:07 作者：Eliauk ＆

这篇文章主要介绍了Vue通过vue-router实现页面跳转的操作步骤,文中有详细的代码示例和图文供大家参考,对大家的学习或工作有一定的帮助,感兴趣的朋友可以参考下

一、准备工作

1、创建一个Vue-cli程序

2、安装vue-router

npm install vue-router --save-dev

3、删除多余的东西

二、创建router

1、在src下创建router包

2、创建跳转的component

分别创建一个Content.vue和Main.vue文件

3、在router包下创建index.js文件

index.js文件中包含了所需的路由信息，详细操作如下代码，注释详解。

import Vue from 'vue'//导入vue的语法
import VueRouter from 'vue-router'//导入vue-router
import Content from "../components/Content";//导入创建的组件
import Main from "../components/Main";
//安装路由
Vue.use(VueRouter);//通过此语句使导入的VueRouter路由生效
 
//配置导出路由，注意VueRouter名要一致
export default new VueRouter({
  routes:[{
    //路由路径 @RequestMapping相似
    path: '/content',
    //名字
    name:'content',
    //跳转的组件
    component:Content
    //以上语句说明，当我们访问到'/content'路由时，就会跳转到Content组件，显示该vue页面
  },{
    //路由路径
    path: '/main',
    //名字
    name:'main',
    //跳转的组件
    component:Main
  }
  ]
})

三、router跳转

上面把我们需要做的东西装备好之后，现在来实现一下路由跳转的功能。

流程：

main.js代码：

import Vue from 'vue'
import App from './App'
//文件在当前目录下的router下，自动扫秒里面的路由配置
import router from './router'
Vue.config.productionTip = false
new Vue({
  el: '#app',
  //配置路由，以便全局使用
  router,
  components:{App},
  template:'<App/>'
})

App.vue代码：

<template>
  <div id="app">
    <h1>Vue-Router</h1>
<!--  控制路由  -->
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容页</router-link>
<!--  控制页面展示  -->
    <router-view></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>

效果：