VUE路由简述

1.路由是什么

在我们浏览网页的过程中，进入一个网页，大多时候就会发起一次http请求。
而前端中的路由，就是实现在页面中跳转而不会再次发送请求。

有时我们再网页中看到 地址中带有#符号，这就代表了当前使用了路由，详情点击

2.路由基础使用

分为五步

1. 引入Vue-router文件，需要位于Vue.js文件之后
2. 创建需要被路由使用的组件
3. 实例化 VueRouter对象，定义routers属性
4. 在Vue实例中注册上一步定义的路由对象
5. 使用<router-view> </router-view>标签引入路由至页面再使用a标签跳转

下面是代码演示

//第一步：引入文件
<script src="./vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> //此处必须要位于VUE文件之后

//第二步：创建组件
var login = {
	tamplate: '<text>这是登录界面</text>' //注意：这里不能使用Vue.component方法定义，否则路由的component属性将会找不到相对应组件
}

//第三步：实例化VueRouter对象
var routerObj = new VueRouter{
	routes: [
		{path: '/login', component: login} //此处 path为 #号后的值，填写对应的值跳转对应的页面component为对应组件，不需要引号
	]
}

//第四步：在Vue实例中注册路由
var vm = new Vue({
	//....
	router: routerOBJ //将之前的路由与 Vue实例绑定
})

//第五步：1.HTML中使用路由
<router-view> </router-view> //直接在 html中使用即可
<a href:"#/login"></a>

//或是使用<router-link>标签代替 a标签
<router-link to = "/login" tag = "span"></router-link> //此标签默认会生成 a标签，可使用 tag属性自己定义其他标签 

网址(或本地地址) + # + 路由path值便可跳转
列如：file:///C:/Users/Administrator/Desktop/Vue/111.htm#/login

3.redirect

我们在一进入页面时就想显示一个路由页面，这时可以在路由对象的routes中使用redirect属性，如下

var routerObj = new VueRouter({
	routes: [ 
		{path: '/', redirect: '/login'},
		{path: '/login', component: login}
	]
})

4.路由选中样式

• 定义路由后，可以直接在CSS中设置类.router-link-active样式

• 或是在路由对象中定义自己的样式名称，再至CSS中使用。如下

//js
var routerObj = new VueRouter({
	//.....
	linkActiveClass: 'myclass'
})

//css
.router-link-myclass{
	//......
}

这种方法会在使用 bootstarp 等UI框架时更加方便

5.路由传参

5.1.query传参

在路由中可以使用 <router-link> 标签传参
然后在组件中获取

//HTML直接带参数跳转
<router-link to = "/login?id=10"></router-link>

//在组件中获取
var comp = {
	template:{ //...... },
	created(){
		console.log(this.$route.query.id) // "10" , $route中的 query可以获取路由传递的参数
	}
}

上面的代码直接在 router-link 标签传递了id值，可以在组件中获取，再做参数处理
当然，传递多个参数也是如此，用&号链接即可，如下

<router-link to = "/login?id=10&num=5"></router-link>

5.2.params传参

与query类似
使用params是需要将router-link和路由中path属性匹配，如下

//HTML
<router-link to = "/login/10/5"></router-link>

//js
var router = new VueRouter({
	routes: [
		{ path: "/login/:id/:num", component: login },
	]
})

var login = {
	template:{ //...... },
	created(){
		console.log(this.$route.params.id, this.$route.params.num) // "10" , "5"
	}
}

上面的代码将路由的path属性以及router-link标签做了匹配，这样也可以拿到我们的参数
注意：匹配必须相互对应，否则不会展示路由页面

5.3.props传参

相对上面两种方法，更加建议使用props传参，得以实现组件与路由的解耦

定义方法也比较简单，在路由实例中直接设置 props 属性为 true，再给组件声明 props 属性，即可接收。听起来比较抽象，下面看一个实例

//实例中定义 props 为 true
var router = new VueRouter({
	routes: [
		{ path:/user/:id, component: user, props: true}
	]
})

//定义组件的 props并引用
var user = {
	props: ['id'] //组件接收参数；
	template: '<div> 用户 id 为 {{ id }} </div>' //调用接收的参数
} 	

定义实例时，props 可以传入一个对象，此时组件中也可以拿到对象的属性，但是无法拿到页面中传过来的数据

//实例中定义 props 为 对象
var router = new VueRouter({
	routes: [
		{ path:/user/:id, component: user, props: {name: "zhangsan", age: 30}} //此时 props为一个对象
	]
})

//定义组件的 props并引用
var user = {
	props: ['id', 'name', 'age'] //组件接收参数；
	template: '<div> {{id}}  {{name}}  {{age}}</div>' //此时的 id 无法接收传来的数据，无法显示在页面中
} 	

上面的问题，在 props 中定义函数类型便可以解决

//实例中定义 props 为 函数
var router = new VueRouter({
	routes: [{ 
		path:/user/:id, 
		component: user, 
		props: route => { return {id:route.params.id, name: "zhangsan", age: 30}}
	}] //此时 props为一个对象
})

//定义组件的 props并引用
var user = {
	props: ['id', 'name', 'age'] //组件接收参数；
	template: '<div> {{id}}  {{name}}  {{age}}</div>' // 显示成功
} 	

6.路由嵌套

在路由实例中使用children属性可以实现路由嵌套

//HTML
  <div id="app">
    <router-link to="/comp1">点击</router-link>
    <router-view></router-view>
  </div>

  <template id="temp1"> //第一层的路由需要添加 router-view标签才能显示嵌套
    <div>
      <h1>这是第一层</h1>
      <router-link to="comp1/comp2">点击</router-link>// to属性需要从路由根部开始写
      <router-view></router-view>
    </div>
  </template>
  <template id="temp2">
    <h2>这是第二层</h2>
  </template>

//js
  var comp1 = { template: "#temp1" }
  var comp2 = { template: "#temp2" }

  var routerObj = new VueRouter({
    routes: [
      { 
      path: "/comp1", 
      component: comp1, 
      children: [ 
      	{ path: "comp2", component: comp2} //使用children属性
      ] 
      }
    ]
  })
  
  var vm = new Vue({  //注册路由
    el:'#app',
    data:{},
    methods:{},
    router: routerObj
  })

注意：路由的嵌套只能使用children属性，若是不使用，则会直接切换路由（路径）

7.单层路由使用多个组件

在路由实例的routes属性中，我们可以配置path和component属性。
而想在路由中使用多个组件，把component改成components就可以配置多个组件了，如下

//js
  var routerObj = new VueRouter({
    routes: [
      { path: "/", components:{'default': comp1, 'next': comp2} }
    ]
  })

上面的代码可以注意到，components 中有default和next两个键名，此键名可以自己定义，而键名后就是跟的组件名称。

这里就已经配置成功了，但是想要在页面中显示，则需要在HTML中加上我们所新加入的组件

  <div id="app">
    <router-view></router-view>
    <router-view name = "next"> </router-view>
  </div>

上面的两个 router-view 代表了我们在JS中定义的组件，name则是定义显示哪一个组件。
第一行的router-view没有定义是因为，vue自动匹配了第一个组件（default）。实际操作建议加上name

下面是完整实现代码

//html
  <div id="app">
    <router-view name = "default"></router-view>
    <router-view name = "next"> </router-view>

  </div>

  <template id="temp1">
    <div>
      <h1>这是第一个</h1>
    </div>
  </template>
  <template id="temp2">
    <h2>这是第二个</h2>
  </template>

//js
  var comp1 = { template: "#temp1" }
  var comp2 = { template: "#temp2" }

  var routerObj = new VueRouter({
    routes: [
      { path: "/", components:{'default': comp1, 'next': comp2} }
    ]
  })

  var vm = new Vue({
    el:'#app',
    data:{},
    methods:{},
    router: routerObj
  })

8.路由命名

路由名称可以在路由实例中使用name属性自定义，并在页面中使用

//定义实例
var router = new VueRouter({
	routes: [{ 
		name: 'user', // 新增name属性，定义路由名称
		path:/user/:id, 
		component: user, 
		props: route => { return {id: route.params.id, name: "zhangsan", age: 30}}
	}] 
})

//html中使用 name路由
<router-link :to = '{name: "user", params: {id: 3} }'></router-link>

上面的代码有几个需要注意的地方

• router-link 中的 to 属性要被绑定，需要加上冒号：
• router-link 中的 to 属性需要传一个对象，name 为跳转的路由名称，params 为需要传递的参数。