基本用法1

基本用法1

用 Vue.js + vue-router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你把 vue-router 添加进来，Vue-router的基本作用就是将每个路径映射到对应的组件，并通过修改路由进行组件间的切换。

第一个单页面应用

现在我们以一个简单的单页面应用开启vue-router之旅，这个单页面应用有3个路径：/home 、list，/about，与这两个路径对应的是3个组件Home、List和About。

HTML

1.首先引入vue.js和vue-router.js：

<script src="../lib/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="../lib/vue-router.js" type="text/javascript" charset="utf-8"></script>

2.使用 使用 router-link 组件来导航.

 <ul class="nav navbar-nav">
 	 <!-- 使用 router-link 组件来导航. -->
	 <!-- 通过传入 `to` 属性指定链接. -->
 	<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
 	<li> <router-link to="/home" >Home</router-link></li>
 	<li> <router-link to="/list" >List</router-link></li>
	 <li> <router-link to="/about">About</router-link></li>
 </ul>

3.使用<router-view>标签

<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>

JavaScript
1.创建组件

在js中创建3个组件Home、List、About：

• 创建组件 Home

  		var Home ={
  		    template: `<div class="jumbotron">
  					  <h1>{{msg}}</h1>
  					  <p>...</p>
  					  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
  					</div>`,
  		    data: function() {
  		        return {
  		            msg: "Hello, vue router!"
  		        }
  		    }
  		}
  

• 创建组件 List

  		var List ={
  		    template: `<div class="list-group">
  						  <a href="#" class="list-group-item" v-for="item in msg">
  						    {{item.title}}
  						  </a>
  						</div>`,
  			    
  		    data: function() {
  		        return {
  		            msg:[
  		            	{title:"Dapibus ac facilisis in"},
  		            	{title:"Morbi leo risus"},
  		            	{title:"Porta ac consectetur ac"},
  		            	{title:"Vestibulum at eros"},
  		            	{title:"Cras justo odio"},
  		            ]
  		        }
  		    }
  		}
  

• 创建组件 About

  		var About = {
  		    template: "<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>"
  		}
  

  2.定义路由,每个路由应该映射一个组件。

  		const routes = [
  		  { path: "/home", component: Home },
  		  { path: "/list", component: List },
  		  { path: "/about", component: About }
  		]
  

  3.创建 router 实例，然后传 routes 配置

  		const router = new VueRouter({
  		  routes  // （缩写）相当于 routes: routes
  		})
  

  4.创建和挂载根实例。

  记得要通过 router 配置参数注入路由，从而让整个应用都有路由功能

  		const app = new Vue({
  		  router
  		}).$mount("#app")
  

  现在，应用已经启动了！

预览：http://vue.taoge1024.com/Vue-router/01/router01.html

git地址：

上述代码在浏览器打开时，内容区域为空，只有点击切换的时候才有内容，是因为我们没有定义默认路由，定义默认路由，同样比较简单，只需要在映射路由时，指定一个根目录，指定要显示哪个组件。

			const routes = [
			  { path: "/", component: Home },//指定默认进来的组件
			  { path: "/home", component: Home },
			  { path: "/list", component: List },
			  { path: "/about", component: About }
			]

---

预览：http://vue.taoge1024.com/Vue-router/01/router02.html

git地址：