广州市增城建设局网站,手表大全网站,河南建设厅网站首页,产品如何做网站推广简介
Vue Router让SPA#xff08;Single-page Application#xff09;的构建更加容易。
Vue Router的功能#xff1a;
嵌套的路由/视图映射模块化的、基于组件的router配置route params, query, wildcards由Vue过渡系统支持的视图过渡效果细粒度#xff08;fine-grained…简介
Vue Router让SPASingle-page Application的构建更加容易。
Vue Router的功能
嵌套的路由/视图映射模块化的、基于组件的router配置route params, query, wildcards由Vue过渡系统支持的视图过渡效果细粒度fine-grained的导航控制自动的激活CSS类的链接HTML5 hash模式或history模式可自定义的滚动行为
安装
使用CDN直接引入
从https://unpkg.com/vue-router3/dist/vue-router.js下载文件。在Vue加载后加载Vue Router会自动安装它到Vue。
script src/path/to/vue.js/script
script src/path/to/vue-router.js/scriptnpm
在模块化系统中先使用npm安装vue-router
npm install vue-router如果不使用全局的script的标签引入vue和vue router那么可以使用Vue.use来安装vue router
import Vue from vue
import VueRouter from vue-routerVue.use(VueRouter)Vue CLI
使用Vue CLI的项目可以运行下面的命令来以插件形式安装vue router但是要注意这样做会覆盖你的App.vue文件注意备份
vue add router从Github克隆最新版本
git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
cd node_modules/vue-router
npm install
npm run build入门
Vue创建的应用程序由一个个组件构成Vue Router的路由映射则将这些组件映射到路由上如此便完成了在哪里渲染什么的目标。
在线快速尝鲜Vue
一个基础示例
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srchttps://unpkg.com/vue2/dist/vue.js/scriptscript srchttps://unpkg.com/vue-router3/dist/vue-router.js/script
/headbodydiv idapph1Hello App!/h1p!-- router-link会被渲染为a标签to属性指定目标链接 --router-link to/fooGo to Foo/router-linkrouter-link to/barGo to Bar/router-link/p!-- route匹配到的组件将被渲染到这里 --router-view/router-view/divscript// 组件定义const Foo { template: divfoo/div }const Bar { template: divbar/div }// 定义routesconst routes [{ path: /foo, component: Foo },{ path: /bar, component: Bar }]// 创建router实例const router new VueRouter({routes // routes: routes的简写})// 创建和挂载根Vue实例const app new Vue({router, // 注入路由于是我们可以通过this.$router访问router通过this.$route访问当前routecomputed: {username() {return this.$route.params.username}},methods: {goBack() {window.history.length 1 ? this.$router.go(-1) : this.$router.push(/)}}}).$mount(#app)/script
/body/htmlrouter-link在路由匹配成功时会自动设置.router-link-activeclass属性值。 参考资料
Installation-Vue Router 3Get Started-Vue Router 3
