快捷導(dǎo)航

Vue通過vue-router實現(xiàn)頁面跳轉(zhuǎn)的全過程

更新時間：2024年04月29日 09:55:06 作者：Eliauk ＆

這篇文章主要介紹了Vue通過vue-router實現(xiàn)頁面跳轉(zhuǎn)的操作步驟,文中有詳細(xì)的代碼示例和圖文供大家參考,對大家的學(xué)習(xí)或工作有一定的幫助,感興趣的朋友可以參考下

一、準(zhǔn)備工作

1、創(chuàng)建一個Vue-cli程序

2、安裝vue-router

npm install vue-router --save-dev

3、刪除多余的東西

二、創(chuàng)建router

1、在src下創(chuàng)建router包

2、創(chuàng)建跳轉(zhuǎn)的component

分別創(chuàng)建一個Content.vue和Main.vue文件

3、在router包下創(chuàng)建index.js文件

index.js文件中包含了所需的路由信息，詳細(xì)操作如下代碼，注釋詳解。

import Vue from 'vue'//導(dǎo)入vue的語法
import VueRouter from 'vue-router'//導(dǎo)入vue-router
import Content from "../components/Content";//導(dǎo)入創(chuàng)建的組件
import Main from "../components/Main";
//安裝路由
Vue.use(VueRouter);//通過此語句使導(dǎo)入的VueRouter路由生效
 
//配置導(dǎo)出路由，注意VueRouter名要一致
export default new VueRouter({
  routes:[{
    //路由路徑 @RequestMapping相似
    path: '/content',
    //名字
    name:'content',
    //跳轉(zhuǎn)的組件
    component:Content
    //以上語句說明，當(dāng)我們訪問到'/content'路由時，就會跳轉(zhuǎn)到Content組件，顯示該vue頁面
  },{
    //路由路徑
    path: '/main',
    //名字
    name:'main',
    //跳轉(zhuǎn)的組件
    component:Main
  }
  ]
})

三、router跳轉(zhuǎn)

上面把我們需要做的東西裝備好之后，現(xiàn)在來實現(xiàn)一下路由跳轉(zhuǎn)的功能。

流程：

main.js代碼：

import Vue from 'vue'
import App from './App'
//文件在當(dāng)前目錄下的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">內(nèi)容頁</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>

效果：