zoukankan      html  css  js  c++  java
  • vue2.0学习之路由

     下载vue-router: cnpm install vue-router --save

    router/main.js

    /*引入所需要的组件*/
    	import VueRouter from 'vue-router';
    	import about from "compontents/about.vue"
    	import news from "compontents/news.vue"
    	import Router from 'vue-router'
    	import VueResource from 'vue-resource';
    
    	Vue.use(VueRouter);
    	Vue.use(VueResource);
    	Vue.use(Router);
    
    	const routes = [ //这里是routes,没有r
    	  { path: '/goods', component: goods },
    	  { path: '/ratings', component: ratings },
    	  { path: '/seller', component: seller }
    	];
    	const router = new VueRouter({
    	  routes,
    	  linkActiveClass:'active'
    	});
    	router.push('/goods');
    	
    	new Vue({
    		el:'#app',
    		router,
    		template:'<App/>',
    		components: { App }
    	})
    

      compontents/about.vue 与compontents/news.vue 一样

    <template>
    	<div>
    		我是关于我们/我是新闻
    	</div>
    </template>
    
    <script>
    	export default {
    
    	}
    </script>
    

      将about.vue和news.vue链接起来

    <template>
    	<div id="app">
    		<div class="tab">
    			<div class="tab-item">
    				<router-link to="/about">关于</router-link>
    			</div>
    			<div class="tab-item">
    				<router-link to="/news">新闻</router-link>
    			</div>
    		</div>
    		<div>
    			<router-view></router-view>
    		</div>
    	</div>
    </template>
    

      

  • 相关阅读:
    [BZOJ4034][HAOI2015]树上操作
    [BZOJ1030][JSOI2007]文本生成器
    [BZOJ2763][JLOI2011]飞行路线
    [POJ3667]Hotel
    [codevs1566]染色
    [codevs2460]树的统计
    [BZOJ2667][cqoi2012][kcoj]模拟工厂
    [NOI2009][codevs1846]KCOJ0191]植物大战僵尸
    [POJ1087]A Plug for UNIX
    Educational Round 66 题解
  • 原文地址:https://www.cnblogs.com/sllzhj/p/8492225.html
Copyright © 2011-2022 走看看