Vue-router

路由 v-router

前端路由和后端路由的区别

1. 后端路由:对于普通网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源
2. 前端路由:对于单页面应用程序(SPA)来说，主要是通过URL中的hash值来实现不同页面之间的切换；同时，hash有一个特点:HTTP请求中不包括hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现
3. 在单页面应用程序中，这种通过hash改变切换页面的方式，称作前端路由（区别于后端路由）

---

创建一个路由对象及语法规则（不适用于webpack）

<router-link 
	to = "/home" 
	tag = 'button' 
	active-class = "current"
>主页
</router-link>

<script src = 'https://unpkg.com/vue-router@2.0.0/dist/vue-router.js'></script> 
	//第一步安装路由，要在vue.js之后
	// 引入后，在window全局对象中，就有了一个路由的构造函数，叫做VueRouter
	let	routes = [ // => 路由匹配的规则
			{path:'/login',component:login},
			{path:'/',redirect:'/login'} //=> 重定向，强制页面默认在login页面上
	// => 1.每个路由规则都是一个对象，这个队则身上必须有两个属性
	// => 2.属性1: 是path，表示监听这个路由地址
	// => 3.属性2: 是component，表示前面匹配是path，
			则展示对应的component对应的组件
	// => 注意: component的属性值必须是一个模板对象,不能是组件名称
		]
	})
	const router = new VueRouter({
        routes,
        linkActiveClass:'cur'
		// 把所有的被选中路径的类名改成 cur
		// active-class的优先级高于统一设置的优先级
    })

• 通过:router:routerObj ,将路由对象挂载到vm实例上;
• router-view: 将符合path的组件展示在页面上，若出现多个view，则会重复展示符合条件的组件;
• router-link: router-link 相当于a标签，点击，跳转到指定的hash值;
• active-class: 控制选中时，对应路径组件的样式类名;

路由传参的两种方式

• query传参 表现形式 : /home?id=10&name=zs
  • 路由映射表不用改动;
  • 通过 ? 传参
  • 通过 :to = "{path:'/home',query:{}}" 或者 :to = "{name:'',query:{}}"传参,可以传递组件内的变量
  • this.$route.query.xxxx获取传递的参数值
  • 使用name，不会把路径写死，可以任意传参

    <router-link to = "/login?id=10&name=zs">登录</router-link>
    <router-link :to="{path:'/login',query:{id:123}">登录</router-link>
    <router-link :to="{name:'login123',query:{id:123}">登录</router-link>
    const routes = [
    	{path:'/login',
    	 name:'login123',
    	 component:login
    	}
    ]
    console.log(this.$route.query.id)

---

• params传参 路径传参 表现形式 : /register/333?id=123
  • 使用路径传参，只能使用name来表示要跳转到哪个路径;
  • 在路由映射表中添加 /:变量 的形式;
  • :to ="{name:'',params:{变量：''}}"
  • this.$route.params.xxxx 获取

<router-link :to="{name:'register123',query:{id:123},params:{qqq:333}}">注册</router-link>
const routes = [
		{path:'/register/:qqq',
		 name:'register123',
		 component:register
		}
	]
	console.log(this.$route.params.qqq)
	console.log(this.$route.query.id)

注意原理:

• 1)当我们通过传参时，vue都会通过设置的path，解析出一个正则regexp,去匹配fullpath
• 2)当fullpath是?传参时，匹配失败，params为空，但是可以通过query获取
• 3)当我们通过设置path占位符时，捕捉到fullpath，可以通过params获取
  
  

路由的嵌套

• 使用children属性，实现子路由，同时，子路由的path前面，不要带’/‘,否则以根路径开始请求，这样不方便客户理解URL路径

  let router = new VueRouter({
          routes: [
              {
                  path:'/account',
                  component:account,
                  children:[
                      {path:'login',component:login},
                      {path:'register',component:register}
                  ]
              }
          ]
      })

命名视图的用法

<router-view name = "left"></router-view >