Vue组件vue-router使用方法小测

Posted 2020-10-01

1.首先下载并载入js脚本：

	<script type="text/javascript" src="./vue.js" ></script>
	<script type="text/javascript" src="./vue-router.js" ></script>

2.创建一个实例供vue使用：

<div id="wrap"> 

<router-link  to="/index" > index </router-link>
<router-link  to="/user" > user </router-link>	 		
//设置两个路由 /index和/user
<transition mode="out-in"  enter-active-class="animated  bounceInLeft"
leave-active-class="animated  bounceOutRight">
<router-view></router-view>
//路由视窗

</transition>
</div>

script：

new Vue({
		    el:"#wrap",
//div的id名称  实例化
			data:{
//数据存放（暂时为空仅验证后面router）		
			},
			router:router,
//添加router
		  })

3.接下（在vue中）来定义router,从官网上我们可以知道定义router的方法：var router = new VueRouter({ routes:routeName});

　　

var router = new VueRouter({
  routes: [
    { path: ‘/index‘, component: list1},
    { path: ‘/user‘, component: list2},
    {path:"*",component:list1}
  ]
})

（注：routes是一个数组  同等于：

var  test = [
	{path:"/index",component:list1 },
	{path:"/user",component:list2 },
	{path:"*",component:list1}
            ]

var router = new VueRouter({
  routes: test
})

）

　4.定义component渲染模板：list1 和 list2  -----这部分用到了局部组件的知识　

　　

<template id="list1">
		<div> 
		<h3>  index 页面  </h3>
		<ul>
		<li>1111111111111</li>
		<li>222222222222222</li>
		<li>333333333333</li>
		<li>44444444444444</li>
		<li>4444444444444</li>
		</ul>
		</div>
		</template>

		<template id="list2">
		<div> 
		<h3>  user 页面  </h3>
		<ul>
		<li>aaaaaaaaaaaaaaa</li>
		<li>bbbbbbbbbbbbbbbbbbb</li>
		<li>cccccccccccccccccc</li>
		<li>ddddddddddddddddd</li>
		<li>eeeeeee</li>
		</ul>

		</div>
		</template>

<!--注意template里面只能写一个div标签-->

　　script中：

var  list1 = {
		template:"#list1",
		}
var  list2 ={

		template:"#list2",
		}

　　就可以实现简单的路由功能了