一、安装及配置路由
安装
npm install vue-router
配置路由
在src下创建一个文件夹router,并在其该文件下创建index.js文件
使用vue-router插件
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter)
import Hello from '@/page/Hello.vue'
export default new VueRouter({
routes: [
{
path: '/home',
component: Hello
}
]
})
在main.js映入index.js文件
import Vue from 'vue'
import App from './App.vue'
import router from '@/router/index.js'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router
}).$mount('#app')
当任意一个组件vc中有$router属性,证明路由引入成功
二、基础
嵌套路由
通俗来讲就是组件中嵌套组件,路由中存在子路由
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter)
import Hello from '@/page/Hello.vue'
import Pag from '@/page/Pag.vue'
export default new VueRouter({
routes: [
{
path: '/home',
component: Hello,
children: [{
path: 'path',
component: Pag
}]
}
]
})
编程式导航和声明式导航
声明式导航
声明式导航 类似于 a 标签来进行页面的切换
<!--a标签-->
<a href='https://www.baidu.com'>
<!--声明式导航-->
<router-link to="/home">11</router-link> <!--入口-->
<router-view></router-view> <!--需要渲染的位置-->
对于上述的嵌套路由,使用声明式导航需要带上父类的路由
<router-link to="/home/path">我是子路由</router-link>
2.编程式导航
router.push(location, onComplete?, onAbort?)
router.replace(location, onComplete?, onAbort?)
//跟 router.push 很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。
在 Vue 实例内部,你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。
想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。
当你点击 <router-link> 时,这个方法会在内部调用,所以说,点击 <router-link :to="..."> 等同于调用 router.push(...)。
方法的解析
// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 带查询参数,变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
注意:如果提供了 path,params 会被忽略,上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法,你需要提供路由的 name 或手写完整的带有参数的 path:
const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user
实例展示
<div @click="getBin">11</div>
getBin() {
this.$router.push({path:'/home'})
}
3.router-go
这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类window.history.go(n)。
// 在浏览器记录中前进一步,等同于 history.forward()
router.go(1)// 后退一步记录,等同于 history.back()
router.go(-1)// 前进 3 步记录
router.go(3)// 如果 history 记录不够用,那就默默地失败呗
router.go(-100)
router.go(100)
路由的命名
有时候,通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候。
path: '/home',
name: 'about',
component: Hello,
要链接到一个命名路由,可以给 router-link 的 to 属性传一个对象:
<router-link:to="{ name: 'user'}">User</router-link>
这跟代码调用 router.push() 是一回事:
router.push({name:'user'})
4.命名的视图
有时候想同时 (同级) 展示多个视图,而不是嵌套展示,例如创建一个布局,有 sidebar (侧导航) 和 main (主内容) 两个视图,这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图,而不是只有一个单独的出口。如果 router-view 没有设置名字,那么默认为 default。
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
const router = new VueRouter({
routes: [
{
path: '/',
components: {
default: Foo,
a: Bar,
b: Baz
}
}
]
})
重定向与别名
重定向
“重定向”的意思是,当用户访问 /a时,URL 将会被替换成 /b,然后匹配路由为 /b
path: '/home',
component: Hello,
redirect: '/page'
重定向的目标也可以是一个命名的路由:
path: '/a', redirect: { name: 'foo' }
甚至是一个方法,动态返回重定向目标:
path: '/a', redirect: to => {
// 方法接收 目标路由 作为参数
// return 重定向的 字符串路径/路径对象
}}
2.别名
path: '/a', component: A, alias: '/b' //'/b'就是别名
路由组件传参
在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性。
取代与 $route 的耦合
const User = {
template: '<div>User {
{ $route.params.id }}</div>'
}
const router = new VueRouter({
routes: [{ path: '/user/:id', component: User }]
})
通过 props 解耦
const User = {
props: ['id'],
template: '<div>User {
{ id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User, props: true },
// 对于包含命名视图的路由,你必须分别为每个命名视图添加 `props` 选项:
{
path: '/user/:id',
components: { default: User, sidebar: Sidebar },
props: { default: true, sidebar: false }
}
]
})
1.props三种模式
布尔模式
若布尔值为真,就会把路由组件收到的所有params参数,以props的形式传给该组件
path: '/home/:a',
component: Hello,
props: true
props:['a'],
对象模式
值为对象,该对象的所有key-value都会以props的形式传给该组件
path: '/home',
component: Hello,
props: { a: 2 }
props:['a']
3.函数模式(query和param)
path: '/home',
component: Hello,
props($route) {
return { a: $route.query.a }
}
props:['a']