router路由的定义和使用方法详解

在routes.js写法
import Todo from '../view/todo/todo.vue'

export default[
	{
		path:'/',
		redirect:'/app'   //redirect这是一个默认路由
	},
	{
		path:'/app',
		component:Todo
	}
]

在router.js写法,导入
import Router from 'vue-router'
import routes from './routes'

export default()=>{
	return new Router({
		routes,
		mode:'history',   //加入这个属性之后，url地址中就不会出现#  配置完之后需要在服务端加入historyApiFallback
		base:'/base/',     //会在所有url中添加一个base路径，例如会在登入前添加http://www.baidu.com/base/login
	    
		//路由跳转滚动，to是跳转之后的地址，from是跳转前的url地址
		//savedPosition是保存了之前滚动的行为，如果存在则返回这个值，如果不存在则设置x和y轴为0
		
		scrollBehavior (to,from,savedPosition){
			if(savedPosition){
				return savedPosition
			}else{
				return{x:0,y:0}
			}
		}，
		fallback:true,     //页面不跳转，内容刷新，跟锚点值一样，设置为false为跳转
		<!-- parseQuery(query){	//不常用
		},
		stringifyQuery(obj){	
		} -->
	})
}

命名路由定义
{
	path:'/index',
	component:index,
	name:'index',  //命名成index
	meta:{
		title: 'this is index' //添加一些信息，利于seo搜索，平时不怎么用到
	},
	children:[
		{
		 path:'test',
		 component:Login     //index的子路由，可以用<router-view>在index组件进行显示
		}
	]
}
项目中使用命名路由
<router-link :to="{name: 'index'}"></router-link>

添加一些动态特效
<transition name="fade"><router-view/></transition>
需在style中定义
.fade-enter-active, .fade-leave-active
transition:opacity .5s
.fade-enter, .fade-leave-to
opacity: 0


路由如何传参
{
	path:"/index/:id",
}
用法
<router-link to=/index/123></router-link>
在mounted可以通过console.log(this.$route)打印出所有router的信息

另一种传参方式
{
	path:"/index/:id",
	props:true,
	component:index
}
需在index组件中用props['id']声明，打印可以直接在mounted用this.id就能打印出当前的id值