vue-router 快速入门
配置路由
$ npm install vue-router --save
routes.js
import Home from './pages/Home.vue' import Gifs from './pages/Gifs.vue' import User from './pages/User.vue' export const routes = [ { path: '', component: Home }, { path: '/gifs', component: Gifs }, { path: '/user/:id', component: User } //指定路由和对应要渲染的组件 //404的path应该是'*',要放在最末尾,当前面的都匹配不到时才匹配到404页面 //this.$route.params.id 可以从路由中拿到id数据 ]
main.js
import VueRouter from 'vue-router' import { routes } from './routes' Vue.use(VueRouter) //路由初始化 const router = new VueRouter({ routes }) //将路由注入根组件 new Vue({ el: '#app', ... router, render: h => h(App) })
App.vue
<template> <div class="app"> <router-view></router-view> </div> </template>
在模板中标注出组件渲染的位置
#号的含义
#号前表示的是发送给服务端的请求,要求返回html文件,而#号后表示的是发送给本地js的请求以寻求解决
路由参数动态绑定
使用watch
watch: { '$route'(to,from) { //to当前路由,from上一个路由 this.id = to.params.id } }
路由的数据传递
复制代码 代码如下:
<router-link :to="{ name: 'userEdit', params: { id: $route.params.id }, query: { locale: 'en', list: 2 } }"></router-link>
传query参数可以达到地址栏出现/"htmlcode">
const User = resolve => { require.ensure(['./components/user/User.vue'], () => { resolve(require('./components/user/User.vue')) }, 'GroupName') } //webpack 异步加载,通过组名,将要同时一起加载的组件打包加载
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月23日
2024年09月23日
- 华少翌.2005-华少翌【中唱艺能】【WAV+CUE】
- 群星《十二女声Ⅱ》[WAV/CUE/分轨][527MB]
- 大自然音乐系列《漫步在山裡》[WAV/CUE/分轨][502.8MB]
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453.3MB]
- 史依弘《史依弘交响乐京剧演唱专辑HQ》头版限量编号[WAV+CUE]
- 曼丽2020《女人三十风继续吹》HQCD[WAV+CUE]
- 曼丽2021《女人三十2雾之恋》HQCD[WAV+CUE]
- 隔壁老樊.2019-我曾【好听音乐】【FLAC分轨】
- 高林生.1993-牵挂你的人是我【白天鹅】【WAV+CUE】
- 洪卓立.2012-找个懂我的女孩(国专)【英皇娱乐】【WAV+CUE】
- 曼丽2022《女人三十3晚秋》HQCD[WAV+CUE]
- 曼丽2018《女人三十4冬天》HQCD[WAV+CUE]
- 柏菲-《好歌30年壹》限量开盘母带ORMCD[低速原抓WAV+CUE]
- 大自然音乐系列《水舞》[WAV/CUE/分轨][424.3MB]
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453.3MB]