Vue cli之路由router
阿新 • • 發佈：2021-10-02
一、安裝路由
Vue-router用於提供給vue專案在開發中用於繫結url和元件頁面的關係的核心外掛。
預設情況下，vue沒有提供路由的功能，所以我們使用vue-router，並需要在專案根目錄。
npm install vue-router
安裝了vue-router外掛以後，我們必須要對路由進行初始化並且還要繫結元件與url地址之間的路由對映關係。
首頁，我們需要在一個單獨的目錄router下建立路由檔案index.js，例項化路由物件並繫結元件和url地址的關係。
二、基本使用
在src路徑下建立router/index.js，程式碼：
import VueRouter from "vue-router";
import Vue from "vue";
Vue.use(VueRouter);
import Home from "../views/Home";
import HelloWorld from "../components/HelloWorld";
import Forecast from "../components/Forecast";
export default new VueRouter({
mode: "history", // hash 表示以位址列的雜湊值作為路徑，history以歷史物件的url作為路徑
routes:[ // 路由列表，裡面的每一個成員都是一個url地址和元件的對映關係
{
path: "/",
component: Home,
},
{
path: "/hi",
component: HelloWorld,
},
{
path: "/index",
component: Forecast,
}
]
});
main.js，程式碼：
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue' // 沒有宣告路徑，則預設從node_module中導包過來
import App from './App' // 如果由聲明瞭路徑，則表示從當前檔案出發根據路徑關係進行導報
import axios from "axios";
import router from "./router/index"; // 匯入路由物件
// 初始化axios物件
Vue.prototype.$http = axios.create();
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
App.vue，程式碼：
<template>
<div id="app">
<!-- <HelloWorld msg="Welcome to Your Vue.js App"/>-->
<!-- <Home></Home>-->
<router-view></router-view>
</div>
</template>
<script>
// import HelloWorld from './components/HelloWorld.vue'
// import Home from './views/Home'
export default {
name: 'App',
components: {
// HelloWorld
// Home
}
}
</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>
三、頁面跳轉
vue-router提供了2種寫法讓我們實現頁面跳轉。
1、通過router-link來跳轉
App.vue，程式碼：
<template>
<div id="app">
<p><a href="/">Home</a></p>
<p><a href="/hi">HI</a></p>
<p><a href="/index">Index</a></p>
<hr>
<p>
<router-link to="/">Home</router-link>
</p>
<p>
<router-link to="/hi">HI</router-link>
</p>
<p>
<router-link :to="url">Index</router-link>
</p>
<hr>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App', // 元件名
data() {
return {
url: "/index",
}
},
components: { // 子元件
}
}
</script>
<style>
</style>
注意：一般在開發中不會在App.vue編寫具體的程式碼，我們這裡僅僅是為了方便學習演示。
2、通過this.$router來跳轉
App.vue，程式碼：
<template>
<div id="app">
<a href="" @click.prevent="goto">Index</a>
<hr>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App', // 元件名
data(){
return {
url: "/index",
user: "root",
}
},
methods:{
goto(){
// 頁面跳轉
if(this.user === "root"){
this.$router.push("/index"); // ajax頁面跳轉到指定的路由地址
// this.$router.back(); // 跳轉返回上一頁
// this.$router.go(-1); // -1相當於back，後退一頁
// this.$router.go(1); // 1表示forward，前進一頁
}
}
},
components: { // 子元件
}
}
</script>
<style>
</style>
四、傳遞引數
vue-router提供了2種用於開發中傳遞引數的方式給我們使用。
1、路徑引數
url地址的路徑作為變數，傳遞引數到下一個頁面元件中進行獲取使用。
router/index.js，程式碼：
import VueRouter from "vue-router";
import Vue from "vue";
Vue.use(VueRouter);
import Home from "../views/Home";
import HelloWorld from "../components/HelloWorld";
import Forecast from "../components/Forecast";
import Article from "../components/Article";
export default new VueRouter({
mode: "history", // hash 表示以位址列的雜湊值作為路徑，history以歷史物件的url作為路徑
routes:[ // 路由列表，裡面的每一個成員都是一個url地址和元件的對映關係
{
path: "/",
component: Home,
},
{
path: "/hi",
component: HelloWorld,
},
{
path: "/index",
component: Forecast,
},
{
path: "/article/:year/:month",
component: Article,
},
]
});
Article.vue，程式碼：
<template>
<div>
查詢{{year}}年{{month}}的系列文章
</div>
</template>
<script>
export default {
name: "Article",
data(){
return {
year: 0,
month: 0,
}
},
created() {
this.year = this.$route.params.year;
this.month = this.$route.params.month;
}
}
</script>
<style scoped>
</style>
2、查詢引數
url地址的查詢字串作為引數，在下一個頁面元件中進行獲取使用。
App.vue:
<template>
<div id="app">
<a href="" @click.prevent="goto">Index</a>
<hr>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App', // 元件名
data(){
return {
url: "/index",
user: "root",
}
},
methods:{
goto(){
// 頁面跳轉
if(this.user === "root"){
this.$router.push("/index?city=南京"); // ajax頁面跳轉到指定的路由地址
}
}
},
components: { // 子元件
}
}
</script>
<style>
</style>
Forecast.vue，程式碼：
<template>
<div>
<input type="text" v-model="city">
<button @click="get_weather">獲取天氣</button>
<table v-if="weather_list.length>1">
<tr>
<th>日期</th>
<th>天氣</th>
<th>溫度</th>
<th>風向</th>
</tr>
<tr v-for="weather in weather_list">
<td>{{weather.date}}</td>
<td>{{weather.type}}</td>
<td>{{weather.low}}~{{weather.high}}</td>
<td>{{weather.fengxiang}}{{weather.fengli|format}}</td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: "Index",
data(){
return {
city: "北京",
weather_list:[],
}
},
filters:{
format(content){
return content.replaceAll("<![CDATA[","").replaceAll("]]>","");
}
},
created(){
// 任意一個元件中都可以獲取查詢引數
console.log(this.$route.query); // 獲取所有的查詢引數
if(this.$route.query.city){
this.city = this.$route.query.city
}
},
methods:{
get_weather(){
// 傳送http請求獲取天氣
this.$http.get("http://wthrcdn.etouch.cn/weather_mini",{
params:{
city: this.city,
}
}).then(response=>{
console.log(response.data.data.forecast);
this.weather_list = response.data.data.forecast;
}).catch(error=>{
console.log(error);
})
}
}
}
</script>
<style scoped>
table{
width: 800px;
border-collapse: collapse;
}
td,th{
border: 1px solid red;
}
</style>