vue-router路由

vue-router路由

后端的路由一般是用于写接口，不同的URL路径对应不同的数据。
前端的路由，不同的路由展示不同的视图内容。vue不同的视图内容可由组件构成。
一个URL路径对应一个组件视图页面。

对于大多数单页面应用，都推荐使用官方支持的vue-router库。
需引入vue-router.min.js

导航路由

1、路由导航标签
默认解析为a标签（通过a标签的锚点跳转），如果想要更改元素类型，通过tag

<router-link to="/index" tag="span">首页</router-link>

2、视图容器，用来加载展示组件（注：平行关系下，一个view容器只能存放一个组件）

<router-view></router-view>

3、定义组件，有几个路径，写几个组件，不需要注册成标签

var Home = {
	template:'<div>这是一个首页的页面</div>'
}

4、创建路由规则，数组格式
每个路由配置都是对象形式

var routes = [
	{
		path:'/',
		redirect:'/index'
	},
	{
		path:'/index',
		component:Index
	},
	{
		path:'/about',
		component:About
	},
	{
		path:'*',
		component:Err
	}
]

5、创建路由对象，实例化VueRouter

var router = new VueRouter({
	// 定义这个对象所具备的路由规则
	routes:routes
})

6、VueRouter挂载到Vue实例上去

var app = new Vue({
	el: '#app',
	router:router
})

编程式路由

如在按钮的点击事件中，跳转到另一个路由

// 编程式路由，根据VueRouter的实例对象中的push方法跳转到想去的路由
router.push('/other')