Vue学习（路由定义、路由传参方式、子路由）-学习笔记

最新推荐文章于 2023-03-30 19:49:42 发布

monkeyhlj

最新推荐文章于 2023-03-30 19:49:42 发布

阅读量513

点赞数 2

分类专栏：前端学习

本文链接：https://blog.csdn.net/hhhmonkey/article/details/118729188

版权

前端学习专栏收录该内容

53 篇文章 2 订阅

订阅专栏

文章目录

- Vue学习（路由定义、路由传参方式、子路由）-学习笔记

Vue学习（路由定义、路由传参方式、子路由）-学习笔记

路由定义（见下单个文件）

//Vue中main.js文件
import Vue from 'vue'
import App from './App.vue'
import router from './router' //从这里引入路由
import store from './store'
import './assets/font/iconfont.css'  //字体图标  
import 'bootstrap/dist/css/bootstrap.css'

Vue.config.productionTip = false

new Vue({
  router,  //加载
  store,
  render: h => h(App)
}).$mount('#app')

路由传参方式

用单个文件来理解：（重要）

<!DOCTYPE html>
<html>
<head>
	<title>vue-router</title>
	<script src="vue.js"></script>
	<script src="vue-router.js"></script>
	<style>
		.active {
			color: #f60;
		}
	</style>
	<script>
		//$route  对象 $route.params   query  path   name  meta
		//$router 为vueRouter实例  $router.push()
		// 1、定义组件 
		var Home = {
			template: '#home'
		}
		var News = {
			template: '#news'
		}
		//2、配置路由
		const routes = [
			{path: '/home/:id',name: 'home', component: Home},
			// params方式传参数，path中需要定义参数
			// query方式不需要传参
			{path: '/news', component: News},
			{path: '/', redirect: '/home'}   //重定向  {path: '/*', redirect: '/home'}   //重定向
		];
		// 3. 创建 router 实例，然后传 `routes` 配置
		const router = new VueRouter({
			routes,//routes:routes
			linkActiveClass: 'active' 
		});
		
		window.onload=function(){
			// 4. 创建和挂载根实例。
			new Vue({
				el:'#my',
				router,  //router实例注入到vue实例中
				data:{
					id:999
				}
			});
		}
	</script>
</head>
<template id="home">
	<div>
		<!-- 获取路由参数的方式 
		params  {{$route.params.id}}-->
		<h3>组件home --{{$route.params.id}}</h3>
	</div>
</template>
<template id="news">
	<div>
		<!-- 获取路由参数的方式 
		query  {{$route.query.id}}-->
		<h3>组件news =={{$route.query.id}}</h3>
	</div>
</template>

<body>
	<div id="my">
		<!-- router-link  跳转   <a href="#/home" class="">home</a>
		to 属性指定链接-->
		<!-- 路由传参的方式有二种
		params:/home/1/a/2 
		query:/home?id=1&name=2&psd=123-->
		<!-- <router-link to="/home/100">home</router-link> -->
		<!-- <router-link :to="'/home/'+id">home</router-link> -->
		<router-link :to="{name: 'home', params: { id: id}}">home</router-link>
		
		<!-- <router-link to="/news?id=1234">news</router-link> -->
		<router-link :to="{path: '/news', query: {id: 5678}}">home</router-link>
		<!-- <button @click="goBack()">12</button> -->
		<div>
			<!-- 路由出口
			路由匹配到的组件渲染在这里 -->
			<router-view></router-view>
		</div>
	</div>
</body>
</html>

<!-- Vue-详解设置路由导航的两种方法： <router-link :to="..."> 和router.push(...)
	//声明式  <router-link :to="...">		
	//编程式  router.push(...)

// 声明式的常见方式
<router-link to="/home">home</router-link>
// 对象
<router-link :to="{path:'/home'}">home</router-link>
// 路由通过名称
<router-link :to="{name: 'homename'}">home</router-link>
//直接路由带查询参数query，地址栏变成 /home?id=10
<router-link :to="{path: 'home', query: {id: 10 }}">home</router-link>
// 命名路由带查询参数query，地址栏变成/home?id=10
<router-link :to="{name: 'homename', query: {id: 10 }}">home</router-link>
//直接路由带路由参数params，params 不生效，如果提供了 path，params 会被忽略
<router-link :to="{path: 'home', params: { id: 10 }}">home</router-link>
// 命名路由带路由参数params，地址栏是/home/10
<router-link :to="{name: 'homename', params: { id: 10 }}">home</router-link>


二、router.push(...)方法
// 字符串
router.push('/home')
// 对象
router.push({path:'/home'})
// 路由通过名称
router.push({name: 'homename'})
//直接路由带查询参数query，地址栏变成 /home?id=10
router.push({path: 'home', query: {id: 10 }})
// 命名路由带查询参数query，地址栏变成/home?id=10
router.push({name: 'homename', query: {id: 10 }})
//直接路由带路由参数params，params 不生效，如果提供了 path，params 会被忽略
router.push({path:'homename', params:{ id: 10 }})
// 命名路由带路由参数params，地址栏是/home/10
router.push({name:'homename', params:{ id: 10 }})
-->