zoukankan      html  css  js  c++  java
  • 折腾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      永久保存,在清除浏览器缓存时,如果勾选,也会被销毁

    岁月无情催人老,请珍爱生命,远离代码!!!
  • 相关阅读:
    [ASP.NET][实例]用户控件的设计与使用
    构造器[java、C#]
    [转]clob和blob两个字段什么分别?
    C#的反射机制调用方法
    C# WinForm 控件美化之改变ListView Head 的背景色
    C# 创建快捷方式
    Copy Html To Clipboard
    改善C#程序的建议在线程同步中使用信号量
    Paste html from Clipboard
    Winform部署mshtml程序集出错的一个解决方案
  • 原文地址:https://www.cnblogs.com/zhoushangwu/p/15343084.html
Copyright © 2011-2022 走看看