Vue中的路由与重定向

vue中的路由可以实现不同页面的跳转，本文是关于如何定义路由以及路由的嵌套

使用vue中的路由机制，需要先引入vue-router.js，引入路由后需要实例化路由，然后挂载在实例中

1.实例化路由

			//定义路由
			var routes=[	
					{
						path:'/news',
						component:news,
						name:'news',
						
					{
						path:'/product',
						component:product,
						name:'product',
					}
				]
			var router= new VueRouter({
					routes	//挂载路由			
			})

html代码如下：

<div id="app">
			<div class="container">
				<router-link to="/news">news</router-link>
				<router-link to="/product">product</router-link>
				<router-view></router-view>
			</div>
		</div>

最后一步在app实例中挂载一下路由

关于路由的嵌套，使用关键字childer

					{
						path:'/news',
						component:news,
						name:'news',
						children:[
							{
								path:'son1',
								component:son1
							},
							{
								//这里不需要加入斜杠
								path:'son2',
								component:son2
							}
						]
					
					},

template代码

		<template id="news">
			<div>
				<div>新闻模块{{$route.query.id }}</div>
				<router-link to='/news/son1'>国内新闻</router-link>
				<router-link to='/news/son2'>国际新闻</router-link>
				<router-view></router-view>
			</div>
		</template>

这里解释一下路由中的关键字

path路由跳转的地址

component指定路由的模板

name路由的别名，在路由传参中使用到这个别名

to跳转的模块

router-view占位符，用来显示对应的路由内容，如果不写则路由跳转成功不会出现内容

路由重定向需要使用关键字redirect

重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]})

重定向的目标也可以是一个命名的路由：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]})

甚至是一个方法，动态返回重定向目标：

var routes=[
	{path:'/news',component:news},
	{path:'/product',component:product},
	{path:'/',redirect:to=>{
	    return '/news';
	}}
]