vue基础回顾 router

vue-router

1. 底层原理 hash 或者h5 histroy(有兼容性)

2. 使用的时候Vue需要引入VueRouter

Vue.use(VueRouter) //VueRouter 底层实际上是instal 安装了两个全局的组件 router-view 和router-link

默认路由：

{

path:'/',

//component:Home //默认页

// redirect:'/home'

redirect:{name:'home'} //也可以起一个名字

}

3. 路由跳转

<li><router-link :to="{name:'home'}">首页</router-link></li> //name 会有兼容性问题

4. 一个路由想要加载多个组件

① 定义组件的时候采用路由的方式

{

name:'home',

path:'/home',

// component:Home

components:{

default:Home,

comp1:Comp1,

comp2:Comp2

}

② 引入组件Comp1 Comp2

③ 在组件显示的地方添加 name属性

<router-view name="comp1"></router-view>

<router-view name="comp2"></router-view>

5. 二级路由

{

path:'/user',

component:User,

children:[{

path:'userAdd', //注意这里不要/,/代表根目录

component:UserAdd

},{

path:'userList', //这里也可以这样写 /user/userList

component:UserList

}]

}

6. 路由钩子函数，不同的钩子之间会做什么

全局组件：

beforeEach(to,from,next)：进入新的页面

beforeEnter 进入路由的配置当中

beforeRouteEnter(to,from,next) 单组件进入时

beforeRouteLeave(to,from,next) 单组件离开时

next(vm=>{}) 组件渲染完毕会调用beforeRouteEnter钩子中 next中的回调函数

beforeResolve(to,from,next) 解析完成

afterEach(to,from,next) 当前进入完毕

7. 跳转页面声明式跳转/编程式跳转

声明式跳转：<router-link :to="{path:'/home'}">首页</router-link>

编程式跳转：this.$router.push("/user/userList");

8. 怎么取得路径的参数

路径传参

?id=1

{{this.$route.query.id}} 通过？路径参数

{{this.$route.params.id}} 通过路由

路由 path:'detail/:id'

<router-link to="user/detail/3">首页</router-link>

9.meta 路由校验用的

在 route.js中添加

meta:{

needLogin:true

}

在路由钩子函数中通过to.matched去获取就能能到

let flag = to.matched.some(match=>match.meta && match.meta.needLogin === true)

可以校验

在路由钩子函数中to.matched 能狗获取到

4.路由懒加载

巴特西

vue基础回顾 router

最新文章

热门文章