井井客

搜索

【VUE实例】vue-router2安装及小例子

相比router老版本,router2.0版本改变稍大,相比之前觉得好用的路由切换,现在用起来真的有点点不顺手吧。这次继安装完vue-cli脚手架工具,开始router2的使用小例子吧。

【VUE实例】vue-router2安装及小例子

继安装好vue-cli,虽然VUE也提供了简单的制作单页应用的方法。但是还是使用vue-router要专业一点吧~那么开始安装吧。npm命令行工具,去项目文件夹下,输入:

npm install vue-router --save

安装完成之后在package.json文件中,dependencies中会新增vue-router一行,并且版本会是2. X(我的当前版本是2.1.1)。

接下来可以用vue中提供的一个.use来使用router啦,打开main.js文件,因为动的地方多,我就直接贴代码了。

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import App from './App'
import page1 from './components/page1'
import page2 from './components/page2'

const router = new VueRouter({
	mode: 'history',
	base: __dirname,
  routes:[
  	{ path: '/page1', component: page1 },
  	{ path: '/page2', component: page2 }
  ]
})

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

这边做为小例子,共用到了3个.vue模板,分别是App.vue\page1.vue\page2.vue。看一下他们分别是什么内容:

App.vue文件内容:
<template>
  <div class="warp">
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  mounted:function(){
  	const flag=true;
  	if(flag){
  		this.$router.push('\page1');
  	}else{
  		this.$router.push('\page2');
  	}
  }
}
</script>
<style>
	body { background: #f2f2f2; height: 100%; overflow: hidden;}
	.warp { width: 400px; height: 200px; margin: 100px auto 0; text-align: center; background: #fff; border: 1px solid #e8e8e8;}
</style>

page1.vue文件中:
<template>
  <p>登录成功跳转到正常访问页面1</p>
</template>

page2.vue文件中:
<template>
  <p>无登录信息跳到登录页面2</p>
</template>

接下来在命令行中执行"npm run dev",弹出的浏览器中就会自动跳到http://localhost:8080/page1网址上面啦。

虽然感觉页面已经出来了,但是你输入page2也还是会跳到page1,最终可以用另一种方法,就是app中啥逻辑也不要。如下:

App.vue文件内容:
<template>
  <router-view></router-view>
</template>

page1.vue文件中:
<template>
	<div>
		<h1>这是页面1</h1>
		<p><router-link to="page2">点击跳到页面2</router-link></p>
	</div>
</template>

page2.vue文件中:
<template>
	<div>
		<h1>这是页面2</h1>
		<p @click='goPage1'>点击跳到页面1</p>
	</div>
</template>
<script>
	export default {
	    methods :{
	        goPage1 () {
	            this.$router.push('/page1');
	        }
	    }
	}
</script>

现在重新启动服务器,命令行中执行“npm run dev”,弹出的浏览器是http://localhost:8080,你可以手动在后面输入page1,就可以看到内容了,从这个页面再切换到2,较第一种例子就能发现区别了吧~

【VUE实例】vue-router2安装及小例子效果图

文章TAG:VUE

作者:井井客原创来源:原创
本文标题:【VUE实例】vue-router2安装及小例子
本文链接:/c/05246.html

上一篇:【VUE实例】win7从零安装vue-cli脚手架
下一篇:JQ配合input range做了一个小计算器效果

文章分类

相关阅读

随便看看