vue2進階篇：vue-router之命名路由

刘大猫吖發表於2024-10-13
Vue路由

@

目錄
  • 10.6命名路由
    • 案例：將案例改為“命名路由”
    • 完整程式碼
  • 本人其他相關文章連結

10.6命名路由


注意點1：
命名路由請使用name屬性，替換掉path屬性的作用，且name直接指定名稱即可，而path必須指定3級目錄（path=’/demo/test/welcome’）才行。

注意點2：
name屬性必須包裹在<router-link>標籤裡面才能使用，舉例比如放在App.vue中有2種寫法
寫法1：用最普通的to屬性跳轉

<router-link class="list-group-item" active-class="active" to="/about">About</router-link>

寫法2：:to屬性，且用{}包裹，明顯這種寫法太費事

<router-link class="list-group-item" active-class="active" :to={“name”:"/about"}>About</router-link>

案例：將案例改為“命名路由”

完整程式碼

完整專案路徑

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入VueRouter
import VueRouter from 'vue-router'
//引入路由器
import router from './router'

//關閉Vue的生產提示
Vue.config.productionTip = false
//應用外掛
Vue.use(VueRouter)

//建立vm
new Vue({
	el:'#app',
	render: h => h(App),
	router:router
})

App.vue

<template>
  <div>
    <div class="row">
      <Banner/>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
					<!-- 原始html中我們使用a標籤實現頁面的跳轉 -->
          <!-- <a class="list-group-item active" href="./about.html">About</a> -->
          <!-- <a class="list-group-item" href="./home.html">Home</a> -->

					<!-- Vue中藉助router-link標籤實現路由的切換 -->
					<router-link class="list-group-item" active-class="active" to="/about">About</router-link>
          <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
						<!-- 指定元件的呈現位置 -->
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
	import Banner from './components/Banner'
	export default {
		name:'App',
		components:{Banner}
	}
</script>

index.js

// 該檔案專門用於建立整個應用的路由器
import VueRouter from 'vue-router'
//引入元件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'

//建立並暴露一個路由器
export default new VueRouter({
	routes:[
		{
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home,
			children:[
				{
					path:'news',
					component:News,
				},
				{
					path:'message',
					component:Message,
					children:[
						{
                            name: "detail",
							path:'detail',
							component:Detail,
						}
					]
				}
			]
		}
	]
})

About.vue

<template>
	<h2>我是About的內容</h2>
</template>

<script>
	export default {
		name:'About',
		/* beforeDestroy() {
			console.log('About元件即將被銷燬了')
		},*/
		/* mounted() {
			console.log('About元件掛載完畢了',this)
			window.aboutRoute = this.$route
			window.aboutRouter = this.$router
		},  */
	}
</script>

Home.vue

<template>
	<div>
		<h2>Home元件內容</h2>
		<div>
			<ul class="nav nav-tabs">
				<li>
					<router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
				</li>
				<li>
					<router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>
				</li>
			</ul>
			<router-view></router-view>
		</div>
	</div>
</template>

<script>
	export default {
		name:'Home',
		/* beforeDestroy() {
			console.log('Home元件即將被銷燬了')
		}, */
		/* mounted() {
			console.log('Home元件掛載完畢了',this)
			window.homeRoute = this.$route
			window.homeRouter = this.$router
		},  */
	}
</script>

News.vue

<template>
	<ul>
		<li>news001</li>
		<li>news002</li>
		<li>news003</li>
	</ul>
</template>

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

Detail.vue

<template>
	<ul>
		<li>訊息編號：{{$route.query.id}}</li>
		<li>訊息標題：{{$route.query.title}}</li>
	</ul>
</template>

<script>
	export default {
		name:'Detail',
		mounted() {
			console.log(this.$route)
		},
	}
</script>

Message.vue

<template>
	<div>
		<ul>
			<li v-for="m in messageList" :key="m.id">
				<!-- 跳轉路由並攜帶query引數，to的字串寫法 -->
				<!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp; -->

				<!-- 跳轉路由並攜帶query引數，to的物件寫法 -->
				<router-link :to="{
					name: 'detail',
					query:{
						id:m.id,
						title:m.title
					}
				}">
					{{m.title}}
				</router-link>
			
			</li>
		</ul>
		<hr>
		<router-view></router-view>
	</div>
</template>

<script>
	export default {
		name:'Message',
		data() {
			return {
				messageList:[
					{id:'001',title:'訊息001'},
					{id:'002',title:'訊息002'},
					{id:'003',title:'訊息003'}
				]
			}
		},
	}
</script>

Banner.vue

<template>
	<div class="col-xs-offset-2 col-xs-8">
		<div class="page-header"><h2>Vue Router Demo</h2></div>
	</div>
</template>

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

Index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <!-- 針對IE瀏覽器的一個特殊配置，含義是讓IE瀏覽器以最高的渲染級別渲染頁面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 開啟移動端的理想視口 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 配置頁籤圖示 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!--  引入第三方樣式-->
    <link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">
    <!--  配置網頁標題-->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <!-- 當瀏覽器不支援js時noscript中的元素就會被渲染 -->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <!-- 容器 -->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

bootstrap.css網上搜一個複製進來，這個上前行程式碼就不複製過來了

結果展示：

本人其他相關文章連結

1.《vue2進階篇：路由》第10章：vue-router，包括基礎路由、巢狀路由、路由的query引數和params引數、命名路由、router-link的replace屬性、程式設計式路由、快取路由元件
2.vue2進階篇：安裝路由
3.vue2進階篇：vue-router之基礎路由
4.vue2進階篇：vue-router之巢狀（多級）路由
5.vue2進階篇：vue-router之路由的query引數
6.vue2進階篇：vue-router之命名路由
7.vue2進階篇：vue-router之路由的params引數
8.vue2進階篇：vue-router之路由的props配置
9.vue2進階篇：vue-router之router-link的replace屬性
10.vue2進階篇：vue-router之程式設計式路由導航
11.vue2進階篇：vue-router之快取路由元件

相關文章