vue-router分为4种方式
1.动态路由 2.嵌套路由 3.编程式路由 4.命名路由和命名视图
简单的静态路由demo
步骤:
1.安装vue-router
npm install vue-router
2.新建一个router文件夹,并新建index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import User from '../containers/user'
import Role from '../containers/role'
Vue.use(VueRouter)
const router = new Router({
mode: 'history',
routes: [
{
path: '/user',
component: User,
},
{
path: '/role',
component: Role
}
]
})
export default router
注:vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。如果不想要很丑的 hash,我们可以用路由的 history 模式。当你使用 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id
3.在main.js中引入
import router from './router';
new Vue({
el: '#app',
router,
components: {App},
template: '<App/>'
});
4.在App.vue中写入<router-view/>
<template>
<div id="app">
<header>
<!-- router-link 定义点击后导航到哪个路径下 -->
<router-link to="/user">User</router-link>
<router-link to="/role">Role</router-link>
</header>
<!-- 对应的组件内容渲染到router-view中 -->
<router-view></router-view>
</div>
</template>
一、动态路由
除了$route.params外,$route 对象还提供了其它有用的信息,例如,$route.query、$route.hash等等。
应用场景:
当我们很多个页面或者组件都要被很多次重复利用的时候,我们的路由都指向同一个组件,这时候从不同组件进入一个"共用"的组件,并且还要传参数,渲染不同的数据,这就要用到动态路由跟路由传参了。
我们在配置路由的时候,将目标组件的路径先配置好,如:
const router = new Router({
routes: [
{
path: '/user/:id',
component: User,
}
]
})
比如多个路由都要进入User组件,这时候在配置路由路径后加个:id(id可随便取名,标识),这个属性id可以在$route.params.id中获取,例如:
<template>
<div id="app">
<header>
<router-link to="/user/1">User用户</router-link>
</header>
<router-view></router-view>
</div>
</template>
点击“User用户”进入,以上配置的id就等于1;
这时候在地址栏就会出现:http://localhost:8080/#/user/1
User组件中用console.log打印出$route.params.id,就可以看到:1
接着说,带参数的路由,跟获取传来的参数值
当router-link被激活点击时,会将当前的to的值push到router对象当中(路由栈),所以这个值可以是string也可以是obj
传参数的时候,我们就写成对象的形式,用到v-bind的js表达式
<router-link to="{path:'/user/1',query:{name:'叶落森'}}">User</router-link>
<template>
<div id="app">
<p>我的id是{{id}},我叫{{name}}</p>
</div>
</template>
<script>
export default {
data () {
return {
id:'',
name:''
};
},
created () {
this.id=this.$route.params.id
this.name=this.$route.query.name
}
};
</script>
复用组件时,想对路由参数的变化作出响应的话,你可以简单地 watch (监测变化)$route对象
<script>
export default {
name: "app",
watch :{
'$route' (to,from){
alert(to.params.id);
}
}
};
</script>
二、嵌套路由
在实际项目中我们会碰到多层嵌套的组件组合而成,我们实现嵌套路由需要在 VueRouter 的参数中使用 children 配置。例:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//引入两个组件
import home from "./home.vue"
import user from "./user.vue"
//定义路由
const routes = [
{ path: "/", redirect: "/home" },//重定向,指向了home组件
{
path: "/home", component: home,
children: [
{ path: "/home/user", component: user }
]
}
]
//创建路由实例
const router = new VueRouter({routes})
export default router
注:路由的重定向,就会在页面一加载的时候,就会将home组件显示出来,因为重定向指向了home组件,redirect的指向与path的必须一致。children里面是子路由,当然子路由里面还可以继续嵌套子路由。
三、编程式路由
除了使用<router-link>创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现
想要导航到不同的 URL,则使用router.push方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。
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
router.replace:
它跟 router.push 很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。
router.go:
router.go(n)这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似 window.history.go(n)。
// 在浏览器记录中前进一步,等同于 history.forward()
router.go(1)
// 后退一步记录,等同于 history.back()
router.go(-1)
// 前进 3 步记录
router.go(3)
四、命名路由和命名视图
命名路由
有时候,通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候。你可以在创建 Router 实例的时候,在 routes 配置中给某个路由设置名称。
const router = new VueRouter({
routes: [
{
path: '/user/:userId',
name: 'user',
component: User
}
]
})
要链接到一个命名路由,可以给 router-link 的 to 属性传一个对象:
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
这跟代码调用 router.push() 是一回事:
router.push({ name: 'user', params: { userId: 123 }})
以上这两种方式都会把路由导航到 /user/123 路径。
命名视图
有时候想同时 (同级) 展示多个视图,而不是嵌套展示,例如创建一个布局,有 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>
一个视图使用一个组件渲染,因此对于同个路由,多个视图就需要多个组件。确保正确使用 components 配置 (带上 s):
const router = new VueRouter({
routes: [
{
path: '/',
components: {
default: Foo,
a: Bar,
b: Baz
}
}
]
})