1.路由是什么
在我们浏览网页的过程中,进入一个网页,大多时候就会发起一次
http
请求。
而前端中的路由,就是实现在页面中跳转而不会再次发送请求。
有时我们再网页中看到 地址中带有#
符号,这就代表了当前使用了路由,详情点击
2.路由基础使用
分为五步
- 引入
Vue-router
文件,需要位于Vue.js
文件之后 - 创建需要被路由使用的组件
- 实例化
VueRouter
对象,定义routers
属性 - 在
Vue
实例中注册上一步定义的路由对象 - 使用
<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 为需要传递的参数。