一、什么是vue-router
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系。
二、路由的安装
npm install vue-router
三、路由的配置
//引用vue
import Vue from 'vue'
//引用路由
import Router from 'vue-router'
//引用模板
import Movies from './views/Movies.vue'
//引用插件
Vue.use(Router)
//命名视图
//把路由实例化
const router=new Router({
mode:'history',//默认路由hash 更改模式history
routes:[
{
//重定向,默认路径
path:'/'
redirect:to=>{
return 'movie'
}
}
,{
//路径
path:'/movie',
name:'movie',
//别名 小名
alias:'/电影',//可以中文,但不推荐
//模板
component:Movies,
},{
path:'com',
name:'com',
component:MoviesCom
}]
})
//export 'default' (imported as 'router') was not found in './router'
//导出路由
export default router
路由有两种模式,hash和history,默认是hash模式,如果想转换为history模式使用mode:'history' 转换。url展示hash带‘#’,history没有。刷新页面,hash可以正常加载hash对应的页面,而history因为没有‘#’所有用户刷新页面之类的操作时,浏览器还是会给服务器发送请求,没有处理的话,会返回 404,一般需要后端将所有页面都配置重定向到首页路由。hash可以支持低版本浏览器和IE
四、router-link和router-view
router-link组件支持用户在具有路由功能的应用中 (点击) 导航。 通过to属性指定目标地址,默认渲染成带有正确链接的a标签,可以通过配值tag属性生成别的标签.。另外,当目标路由成功激活时,链接元素自动设置一个表示激活的 CSS 类名。
router-view显示匹配的组件
五、动态路由匹配
我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。那么,我们可以在vue-router的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果:
const User = {
template: '<div>User</div>'
}
const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{ path: '/user/:id', component: User }
]
})
现在呢,想user/foot和user/bar 都将映射到相同的路由。
一个“路径参数”使用冒号 :
标记。当匹配到一个路由时,参数值会被设置到this.$route.params,可以在每个组件内使用。于是,我们可以更新User的模板,输出当前用户的 ID:
const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
六、编程式导航
在 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' }})
七、重定向
重定向也是通过routes配置来完成,下面例子是从/a重定向到/b:
const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})
重定向的目标也可以是一个命名的路由:
const router = new VueRouter({
routes: [
{ path: '/a', redirect: { name: 'foo' }}
]
})
甚至是一个方法,动态返回重定向目标:
const router = new VueRouter({
routes: [
{ path: '/a', redirect: to => {
// 方法接收 目标路由 作为参数
// return 重定向的 字符串路径/路径对象
}}
]
})
注意导航守卫并没有应用在跳转路由上,而仅仅应用在其目标上。在下面这个例子中,为/a路由添加一个beforeEnter守卫并不会有任何效果。
八、路由组件传参
在组件中使用$route会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性。
通过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 }
}
]
})
布尔模式
如果 props
被设置为 true
,route.params
将会被设置为组件属性
对象模式
如果props是一个对象,它会被按原样设置为组件属性。当props是静态的时候有用。
const router = new VueRouter({
routes: [
{
path: '/promotion/from-newsletter',
component: Promotion,
props: { newsletterPopup: false }
}
]
})
函数模式
你可以创建一个函数返回props。这样你便可以将参数转换成另一种类型,将静态值与基于路由的值结合等等。
const router = new VueRouter({
routes: [
{
path: '/search',
component: SearchUser,
props: route => ({ query: route.query.q })
}
]
})
总结:
到这里,就介绍完了,祝大家生活快乐