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.使用组件  

  

    • 路由的跳转方式
1.通过标签 
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配对的 querynamepath都可以 ;使用路由参数必须要配置路由规则里面配置好参数名,否则刷新页面参数会丢失 ;


    • 嵌套路由 

      使用场景: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/

 

你可能感兴趣的:(Vue 路由模块入门)