Vue 路由模块入门

• 前端路由

　　　　路由是根据不同的 url 展示不同的内容或页面；　　　

　　　　前端路由是客户端浏览器可以不依赖服务端，不需要重新请求，可根据不同的URL渲染不同的视图页面

　　　　单页面的路由方式有两种：

　　　　　　哈希模式（利用hashchange事件监听url的hash的改变）

　　　　　　history模式（使用此模式需要后台模式配合把接口doa）

　　　　锚点值的改变，监听到锚点值改变了就去局部改变页面数据，不做跳转 ；

• vue-route 使用步骤

1.下载 npm i vue-router -S
2.安装插件Vue.use(VueRouter);
3.创建路由对象 var router = new VueRouter();
4.配置路由规则 router.addRoutes([路由对象]);
　　路由对象{path:'锚点值',component:要显示的组件}
5.将配置好的路由对象交给Vue
    在options中传递-> key叫做 router
6.使用组件 <router-view></router-view> 

　　

• • 路由的跳转方式

1.通过标签 <router-link to='/login'></router-link>
2.通过js控制跳转 this.$router.push({path:'/login'})

　　　　　this.$router.push() 跳转到指定的url，会向history插入新记录
　　　　　this.$router.replace() 同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。this.$router.go(-1) 常用来做返回，读history里面的记录后退一个；　　

　　　　   vue-router中的对象：
　　　　　　$route 路由信息对象,只读对象；
　　　　　　$router 路由操作对象,只写对象 ；

• 路由的传参和取参
  
  1. 查询参
  　　配置（传参） :to="{name:'login',query:{id:loginid}}"
  　　获取（取参） this.$route.query.id
  2. 路由参数
  　　配置（传参） :to="{name:'register',params:{id:registerid} }"
  　　配置路由的规则 { name:'detail',path:'/detail/:id'}
  　　获取 this.$route.params.id
  
  　　

　　　　　　:to传参的属性里 params是和name配对的 query和name或path都可以 ；使用路由参数必须要配置路由规则里面配置好参数名，否则刷新页面参数会丢失 ；

• • 嵌套路由　

　　　　　　使用场景：js跳转路由传参和标签传参，路由相同而参数不同时页面不做刷新的问题；

//安装路由插件
Vue.use(VueRouter);
//创建路由对象
var router= new VueRouter({
	//配置路由对象
	routes:[
		{
			path:'',
			redirect:'/nav'
		},
		{
			path:'/nav',
			name:'nav',
			component:Nav,
			//嵌套路由增加这个属性
			children:[
				//配置嵌套路由
				{path:'',redirect:'/nav/index'},
				{path:'index',name:'nav.index',component:Index},
				{path:'pensonal',name:'nav.pensonal',component:Pensonal},
				{path:'message',name:'nav.message',component:Message},
				{path:'mine',name:'nav.mine',component:Mine},
			]
		}
	]
})

　　

 

 官方文档：

https://router.vuejs.org/zh/