Vue Router学习笔记

一、配置

https://www.cnblogs.com/xxr0218/p/13534571.html

其中index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

export default new VueRouter({
	routes: [{
		path: '/home',
		name: 'home',
		component:()=>import('@/views/home.vue')
	}]
})

main.js

import Vue from 'vue'
import App from './App.vue'
import router from '../router/index.js'
Vue.config.productionTip = false

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

home.vue就随便写点什么

然后再App.vue中写入<router-view></router-view>

输入路径http://localhost:8080/#/home

成功

二、路由跳转

1.<router-link></router-link>
在App.vue下


点击home即可跳转

2.编程式导航
定义一个按钮

 <button @click="toHome">home</button>
 

toHome方法：

 toHome(){
		  this.$router.push({
			  path:'/home'
		  })
	  }

点击按钮即可跳转

三、动态路由(传参)

应用场景：根据商品id的不同，显示不同的详情页
在路由文件下

export default new VueRouter({
	routes: [{
		path:'/home/:id', //:id 绑定
		component:()=>import('@/views/home.vue')
	}]
})

home.vue下

<template>
	<div>
			this is home
			<h1>{{$route.params.id}}</h1>
	</div>

</template>

这时在地址栏home后面加上/123时

/456时

编程式导航下的传参

在toHome方法中加入

 toHome(){
		  this.$router.push({
			  path:'/home',
			  query:{
				  name:'Jack'
			  }
		  })
	  },

此时再点击home