1.二级路由
1.1 二级路由
二级路由相当将一级路由的某个组件看作使根组件,然后创建前端路由即可;
1.2 实现步骤
由于一级路由已经引入vue-router的js文件,并将路由对象绑定在根节点上;
所以相比于创建路由,步骤有所精简;
1. 在vue某一个想要在其内部添加二级路由的组件内部中template字段下,添加router-link标签对,并设置其to属性;
2. 在这个template字段下添加router-view标签对,用来显示二级路由;
3. 在js中创建变量接受vue.component()组件对象(构造函数);
4. 在路由配置对象中,这个想要添加二级路由的组件内部添加children字段的数组,在该数组总添加子路由的匹配规则;可以将children类比为组件中的routes;设置子路由的path属性时可以把/去掉;
级路由的路径规范一般都是 一级路由/二级路由;
1,.3 代码演示
a标签加href属性与router-link 加to属性一样都能实现效果;
<div id="app">
<a href="#/main">主页</a>
<a href="#/user">用户</a>
<a href="#/login">登录</a>
<router-link to="/main">主页</router-link>
<router-link to="/user">用户</router-link>
<router-link to="/login">登录</router-link>
<router-view></router-view>
</div>
var Home = Vue.component('homeCom', {
template: `<h1>我是主页</h1>`
})
var Login = Vue.component('loginCom', {
// 设置二级路由的时候 二级路由的路径规范一般都是有一级路由/二级路由
// 1.二级路由的组件出口标签添加到login组件里
template: `<div>
<h1>我是登录</h1>
<router-link to="/login/qq">qq登录</router-link>
<router-link to="/login/weChat">微信登录</router-link>
<router-link to="/login/tel">手机验证码登录</router-link>
<router-view></router-view>
</div>`
})
var User = Vue.component('userCom', {
template: `<h1>我是用户</h1>`
})
var NotFound = Vue.component('notFound', {
template: `<h1>Not Fount 404</h1>`
})
// 2.二级路由界面
var QQ = Vue.component('qqCom', {
template: `<h2>QQ登录</h2>`
})
var tel = Vue.component('telCom', {
template: `<h2>手机登录</h2>`
})
var weChat = Vue.component('weChatCom', {
template: `<h2>微信登录</h2>`
})
var router = new VueRouter({
routes: [
{
path: '/main',
component: Home
},
{
path: '/login',
component: Login,
// 3.设置组件下的子路由的匹配规则
// 设置子路由的path的时候,可以把/去掉,访问的时候需要拼上一级路由
children:[
{
path:'qq',
component:QQ
},
{
path:'tel',
component:tel
},
{
path:'weChat',
component:weChat
}
]
},
{
path: '/user',
component: User
},
{
path: '/',
redirect: '/home'
},
// 404 一般定义在路由匹配关系的最后面
// path:'*' / path:"*" 匹配所有的路由地址,如果要路由地址被前面的匹配规则匹配上,这时候显示所对应的组件,
//不会再往下进行匹配,如果当前路由没有匹配到,往下一直找匹配,直到找到*为止。
{
path:'*',
component:NotFound
}
]
})
new Vue({
el: '#app',
data: {
},
router
})
2. 路由跳转
2.1 路由跳转的分类
路由跳转分为两类:1.声明式导航跳转:使用router-link加to属性或者a标签加href属性实现;
2.编程式导航跳转:触发事件绑定的函数;执行根组件的methods字段中定义的方法;使用路由对象的push、back、replace等函数来实现;
2.2 路由跳转的代码演示
<div id="app">
<a href="#/main">主页</a>
<a href="#/user">用户</a>
<a href="#/login">登录</a>
<!--1. 使用router-link 实现路由跳转的方式为声明式导航跳转 -->
<router-link to="/main">主页</router-link>
<router-link to="/user">用户</router-link>
<router-link to="/login">登录</router-link>
<!--2. 使用js实现跳转方式为编程式导航跳转 -->
<button @click="goMain">主页的方法</button>
<router-view></router-view>
</div>
//router 为已经创建好的路由对象
new Vue({
el: '#app',
data: {
},
methods: {
goMain() {
// 1.跳转方式一 使用router对象的push,参数式路由地址
// router.push('/home')
// 2 跳转方式二 push() 的参数式对象,对象里添加path:'/home';
// router.push({
// path:'/home',
// })
// 3. 跳转方式三 push() 可以使用命名路由进行条i转 参数式路由名称
// router.push({
// name:'main',
// })
// 返回上一个路由页面
// router.back();
// replace() 替换,不会存在历史记录种
// router.replace('/home')
// this.$router 全局的路由器对象 router全局路由器对象
// 在这里可以使用this.$router 在外部最好使用router
console.log(this.$router===router,router);
// this.$route 当前的路由器对象信息
console.log(this.$route);
// 注意 编程式导航跳转,当前页跳转到当前页会报错,
if (this.$route.path != '/home') {
this.$router.push('/home');
}
}
},
router
})
3. this.$router 和 this.$route的区别
this.$router===new VueRouter 全局路由器对象 包含各个组件的路由对象信息
this.$route 当前页的路由对象