<vue 路由 5、动态路由-标签上传递参数>_心得技巧

心得技巧

html5 HTML/Xhtml CSS XML/XSLT Dreamweaver教程 Frontpage教程心得技巧

上一篇: jsp+servlet+MySQL(3) 下一篇:标签测试问题记录

<vue 路由 5、动态路由-标签上传递参数>

发布时间：2022-06-29 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了<vue 路由 5、动态路由-标签上传递参数>，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

一、效果

在about页面点击“我的”，路径里传入了参数zhangsan,在“我的”页面里接收传递过来的张三并展现出来。注：标签中传递参数写法

二、代码结构

注：主要是标红的几个文件

三、代码

index.js

//引入路由
import {
	createRouter,
	createWebHistory
} From 'vue-router'
import Home from '../views/Home.vue'

//定义路由
const routes = [{
		path: '/',
		name: 'Home',
		component: Home
	},
	{
		path: '/about',
		name: 'About',
		component: () => import('../views/About.vue'),
		children: [{
				path: '',
				component: () => import('../views/AboutNews.vue')
			},
			{
				path: 'news',
				component: () => import('../views/AboutNews.vue')
			},
			{
				path: 'sport',
				component: () => import('../views/AboutSport.vue')
			},
			{
				path: 'me/:userId',
				component: () => import('../views/AboutMe.vue')
			}
		]
	}
]

//创建路由
const router = createRouter({
	//createWebHashHistory hash模式路径前面会多一个#号
	history: createWebHistory(PRocess.env.BASE_URL),
	routes
})

//返回了路由
export default router

App.vue

<template>
  <div id="nav">
    <router-link to="/"  replace>Home</router-link> |
    <router-link to="/about"  replace>About</router-link> |
<!-- 	<router-link :to="'/about/me/'+userId">我</router-link> -->
	 
  </div>
  <router-view></router-view>
</template>


<script>
 export default {
   name: 'App',
   data() {
     return {
       userId: 'zhangsan' 
     }
   } 
 }
</script>

 
 <style>
  .router-link-active {
    color: #f00; 
  } 
 
 </style>

Home.vue

<template>
  <div class="home">
	  <p>Home Page</p>
    <img alt="Vue LOGo" src="../assets/logo.png">
  </div>
</template>

<script>
</script>

About.vue

<template>
  <div class="about">
    <h1>about page</h1>
	
	<div>
		<router-link to="/about/news">新闻</router-link>|
		<router-link to="/about/sport">体育</router-link>|
		<router-link :to="'/about/me/'+userId">我的</router-link>|
	 
		<router-view></router-view>
	</div>
	
  </div>
  
</template>

<script>
 export default {
   name: 'About',
   data() {
     return {
       userId: 'zhangsan' 
     }
   } 
 }
</script>

AboutNews.vue

<template>
  <div>
    <ul>
      <li>新闻1</li>
      <li>新闻2</li>
      <li>新闻3</li>
      <li>新闻4</li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "AboutNews"
  }
</script>

<style scoPEd>

</style>

AboutSport.vue

<template>
  <div>
    <ul>
      <li>体育1</li>
      <li>体育2</li>
      <li>体育3</li>
      <li>体育4</li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "AboutSport"
  }
</script>

<style scoped>

</style>

AboutMe.vue

<template>
  <div>
     <p>我的主页</p>
	 <p>{{$route.params.userId}}</p>
  </div>
</template>

<script>
  export default {
    name: "AboutMe"
  }
</script>

<style scoped>

</style>