折腾vue--vue router的简单使用

1.下载vue  npm install vue-router

2.创建路由辅助js

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

Vue.use(VueRouter)

const router = new VueRouter({
	routes:[
	{
		name:'test', // 名称在传参时会使用
		path:'/test', // 组件请求路径（router的请求路径）
		component:() => import('@/views/test.vue'), // 映射的组件路径，实际的页面路径，需使用自己的实际目录
	}]
})

export default router

3.路由添加到全局

import Vue from 'vue'
import App from './App.vue'
import router from '@/router/index.js'  // 引用路由辅助js

Vue.config.productionTip = false

new Vue({
	router, // 这里还要添加
	render: h => h(App),
}).$mount('#app')

4.使用

<template>
	<div>
		<input type="button" @click="jump()" value="跳转"/>
		<!-- link跳转 -->
		<router-link to="/test">home</router-link>
		  <router-view></router-view>
	</div>
</template>

<script>
	export default {
	  name: 'home',
	  methods:{
		  jump(){
			  // js跳转
			  this.$router.push({
				  path:'/test',
				  name:'test',
				  query:{
					  user:{
						  sex:1,
						  name:'zsw'
					  }
				  }
			  })
		  }
	  }
	}
</script>

<style>
</style>

　　

5.路由传参数参考博客：https://www.cnblogs.com/beka/p/8583924.html 

6.路由深入了解参考地址：https://www.jianshu.com/p/06d08ea39e31

7.传参与数据保存可使用sessionStorage  localStorage

sessionStorage  浏览器关闭销毁

localStorage      永久保存，在清除浏览器缓存时，如果勾选，也会被销毁