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 永久保存,在清除浏览器缓存时,如果勾选,也会被销毁