安装
直接下载 / CDN
https://unpkg.com/vue-router/dist/vue-router.js
Unpkg.com 提供了基于 NPM 的 CDN 链接. 上面的链接会一直指向在 NPM 发布的最新版本. 你也可以像 https://unpkg.com/vue-router@2.0.0/dist/vue-router.js 这样指定 版本号 或者 Tag.
在 Vue 后面加载 vue-router, 它会自动安装的:
- <script src="/path/to/vue.js"></script><script src="/path/to/vue-router.js"></script>
- NPM
- npm install vue-router
如果在一个模块化工程中使用它, 必须要通过 Vue.use() 明确地安装路由功能:
import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)
如果使用全局的 script 标签, 则无须如此(手动安装).
# 基础
开始
- html:
- <script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
- Hello App!
- Go to Foo Go to Bar
显示的当前路由的内容
实现路由的跳转
- JavaScript:
- // 0. 如果使用模块化机制编程, 導入 Vue 和 VueRouter, 要调用 Vue.use(VueRouter)// 1. 定义 (路由) 组件.// 可以从其他文件 import 进来 const Foo = { template: 'foo' } const Bar = { template: 'bar' } // 2. 定义路由 // 每个路由应该映射一个组件. 其中 "component" 可以是 // 通过 Vue.extend() 创建的组件构造器, // 或者, 只是一个组件配置对象. // 我们晚点再讨论嵌套路由. const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] // 3. 创建 router 实例, 然后传 `routes` 配置 // 你还可以传别的配置参数, 不过先这么简单着吧. const router = new VueRouter({ routes // (缩写)相当于 routes: routes }) // 4. 创建和挂载根实例. // 记得要通过 router 配置参数注入路由, // 从而让整个应用都有路由功能 const app = new Vue({ router }).$mount('#app') // 现在, 应用已经启动了!
当 对应的路由匹配成功, 将自动设置 class 属性值 .router-link-active
步骤:
1. 在 main.js 中引入 vue-router
import Vue from 'vue'import VueRouter from 'vue-router'
2. 在 main.js 中使用这个 router 插件
Vue.use(VueRouter)
3. 生成这个 router 实例
export default new Router(){ routes:[ { path:'/', name:'home', component:Home },{ path:'/list', name:'list', component:List } ]}
4. 在 main.js 中把路由实例传递给 Vue 根组件
import router from './router'new Vue({ el:'#app', router, template:'', components:{ APP }})
静态路由
静态配置的 ---> import ....
固定路径路由的配置
{ path:'/', name:'home', component:Home},{ path:'/list', name:'list', component:List}
动态路由匹配
只有动态路由可以做到分页的效果
- //localhost:8080/#/list/2index,js
- { path:'/list/:id', name:'list', component:List}
- list.vue
- <script> data(){ return { title:""} } export default{ mounted(){ if(this.$route.params.id == 1){ // 请求第一页数据 this.title=" 第一页 "} if(this.$route.params.id == 2){ // 请求第二页数据 this.title=" 第二页 " } } }</script>
接收多个个参数
- index.js
- { path:'/list/:id/name/:name', name:'list', component:List }
- list.vue
- <script> data(){ return { title:"", name:"" } } export default{ mounted(){ // 结构赋值写法 const {name,id} = this.$route.params; this.name = name; //this.name = this.$route.params.name; if(this.$route.params.id == 1){ // 请求第一页数据 this.title="第一页" } if(this.$route.params.id == 2){ // 请求第二页数据 this.title="第二页" } } }</script>
传递不同参数 显示不同数据
项目应用: 详情页
watch 响应路由参数的变化
监听路由的变化
watch:{ '$route'(to,from){ this.name = to.params.name; }}
在 2.2 中引入守卫( beforeRouteUpdate)
守卫 --> 钩子函数
beforeRouteUpdate (to, from, next) { this.name = to.params.name; next();// 走到下一个钩子}
嵌套路由
头部左侧不变只有内容区改变 这样的需求可以用嵌套路由来做
{ path:'/list', name:'list', component:List, childeren:[{ path:'a', component:A }] }
再引入一个 A 组件 A.vue
在 list.vue 组件中通过, 显示 A 组件的内容
在一个非 app 组件里面写显示的是当前路由下子组件的内容
编程式的导航
除了来创建 a 标签来定义导航链接, 还可以借助 router 的实例方法
router.push(location,onCompelte,onAbort)
在 Vue 实例内部, 可以通过 $route 访问路由实例, 因此你可以调用 this.$route.push
想要导航到不同的 URL, 则使用 router.push 方法. 这个方法会向 history 栈添加一个新的记录, 所以, 当用户点击浏览器后退按钮时, 则回到之前的 URL.
当你点击时, 这个方法会在内部调用, 所以说,
点击 ---> 声明式
等同于
调用 router.push(...) --->编程式
可以在 Header 组件中跳转到 list 中
export defalut{ methods:{ handleClick(){ this.$router.push({ name:'list' }) } }}
可以在 Header 组件中跳转到 list/123 中
export defalut{ methods:{ handleClick(){ this.$router.push({ // 一种方式 //path:'/list/123', //2 种方式 name:'list' params:{ id:123 } }) } }}
使用 router.push 或者 router.replace 里面都不能让 path 和 params 同时存在
- // 字符串 router.push('home');// 对象 router.push({path:'home'})// 命名的路由 router.push({name:'user',params:{userId:123}})// 带查询参数, 变成 / registerplan=privaterouter.push({path:'register',query:{plan:'private'}})
- router.replace
和 router.push 唯一的不同就是, 不会向 history 添加新纪录, 而是替换掉当前的 history 记录不能返回
router.go
命名路由
定义名字跳转
命名视图
var app = new VueRouter({ routers:[{ path:'/', componens:{ defaults:Foo, a:Bar, b:Baz } }] })
重定向和别名
访问 / abc 重定向到 / 根路径
{ path:'/abc', redirect:'/'}
访问 / bieming 实际上还是访问的根路径
{ path:'/', name:'home', component:Home, alias:'/bieming'}
路由组件传参解耦
动态路由传 id
{ path:'/list/:id', name:'list', component:List, props:true }
在 list.vue 中
可以直接通过 props['id']获取数据
<script> export default{ props['id'] }</script>
对象模式
props:{name:"dell"}
一般是写死的字符串静态数据
函数模式
- index.js
- { path:'/list/:id', name:'list', component:List, props : (route)=>({ query:route.query.q id:route.params.id }) }
- list.vue
- <script> export default{ props['query','id'] }</script>
来源: http://www.92to.com/bangong/2018/08-17/34035389.html