脚本宝典收集整理的这篇文章主要介绍了

vue路由配置

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>1、安装路由,因为路由是vue的一个插件。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm (cnpm) install vue-router -D" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs lisp"><code style="word-break: break-word; white-space: initial;">npm (<span class="hljs-name">cnpm</span>) install vue-router -D</code></pre> <p>2、在main.js中引入路由</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import Vue form 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">import</span> <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a> form <span class="hljs-string">'vue'</span> <span class="hljs-keyword">import</span> VueRouter <span class="hljs-keyword">from</span> <span class="hljs-string">'vue-router'</span> Vue.use(VueRouter)</code></pre> <p>3、在main.js中配置路由</p> <p><span class="img-wrap"><img data-src="/img/bVbeaWy?w=177&amp;h=132" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import Vue from 'vue' import App from './App.vue' // 引入路由 import VueRouter from 'vue-router' Vue.use(VueRouter) import Home from './Home' import Me from './Me' // 路由配置 const router = new VueRouter({ mode: 'history', // 使用h5的history模式 base: __dirname, // 指定根目录 linkActiveClass: 'active', routes: [ { path: '/home', component: Home }, { path: '/me', component: Me }, { path: '*', redirect: Home } ] }) new Vue({ el: '#app', router, // 引入路由 render: h => h(App)<br /> })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span> <span class="hljs-keyword">import</span> App <span class="hljs-keyword">from</span> <span class="hljs-string">'./App.vue'</span> <span class="hljs-comment">// 引入路由</span> <span class="hljs-keyword">import</span> VueRouter <span class="hljs-keyword">from</span> <span class="hljs-string">'vue-router'</span> Vue.use(VueRouter) <span class="hljs-keyword">import</span> Home <span class="hljs-keyword">from</span> <span class="hljs-string">'./Home'</span> <span class="hljs-keyword">import</span> Me <span class="hljs-keyword">from</span> <span class="hljs-string">'./Me'</span> <span class="hljs-comment">// 路由配置</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> router = <span class="hljs-keyword">new</span> VueRouter({ mode: <span class="hljs-string">'history'</span>, <span class="hljs-comment">// 使用h5的history模式</span> base: __dirname, <span class="hljs-comment">// 指定根目录</span> linkActive<a href="http://www.js-code.com/tag/class" title="浏览关于“Class”的文章" target="_blank" class="tag_link">Class</a>: <span class="hljs-string">'active'</span>, routes: [ { path: <span class="hljs-string">'/home'</span>, component: Home }, { path: <span class="hljs-string">'/me'</span>, component: Me }, { path: <span class="hljs-string">'*'</span>, redirect: Home } ] }) <span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#app'</span>, router, <span class="hljs-comment">// 引入路由</span> render: <span class="hljs-function"><span class="hljs-params">h</span> =&gt;</span> h(App) })</code></pre> <p>4、很明显main.js中要引入喝多第三方插件,这样在main.js中配置路由是不合理的,所以需要在src目录中创建,config目录,里面创建routes.js路由文件</p> <p><span class="img-wrap"><img data-src="/img/bVbea2j?w=223&amp;h=183" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>router.js 代码</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) import Home from '../Home' import Me from '../Me' export default new VueRouter ({ mode: 'history', base: __dirname, routes: [ { path: '/home', component: Home, name='home' }, { path: '/me', component: Me, name='me' children: [ // 子路由 { path: 'child-one', component: ChildOne } ] }, { path: '/books/:id', component: BookDetails, name='BookDetails' } ] })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span> <span class="hljs-keyword">import</span> VueRouter <span class="hljs-keyword">from</span> <span class="hljs-string">'vue-router'</span> Vue.use(VueRouter) <span class="hljs-keyword">import</span> Home <span class="hljs-keyword">from</span> <span class="hljs-string">'../Home'</span> <span class="hljs-keyword">import</span> Me <span class="hljs-keyword">from</span> <span class="hljs-string">'../Me'</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">new</span> VueRouter ({ mode: <span class="hljs-string">'history'</span>, base: __dirname, routes: [ { path: <span class="hljs-string">'/home'</span>, component: Home, name=<span class="hljs-string">'home'</span> }, { path: <span class="hljs-string">'/me'</span>, component: Me, name=<span class="hljs-string">'me'</span> children: [ <span class="hljs-comment">// 子路由</span> { path: <span class="hljs-string">'child-one'</span>, component: ChildOne } ] }, { path: <span class="hljs-string">'/books/:id'</span>, component: BookDetails, name=<span class="hljs-string">'BookDetails'</span> } ] })</code></pre> <p>5、路由与导航<br />router-view:路由坐基<br />router-link</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="参数: 1、:to => :to=&quot;{name: 'home'}&quot; 跳转的路由name<br /> :to=&quot;{name: 'BookDetails', params: {id: 1}}&quot; 路由跳转参数<br /> 获取:this.$route.params.id 就可以获取到参数<br /> export default {<br /> created() {<br /> const bookId = this.$route.params.id<br /> },<br /> watch: { // 参数路由组件的生命周期钩子函数不会再调用,created,mounted..., 所以如果要查看,需要监听<br /> '$route' (to, from) {<br /> 对路由变化做出响应<br /> }<br /> }<br /> }<br /> 或者<br /> to => to=&quot;/home&quot; 跳转路由path</p> <p>2、active-class=&quot;active&quot; 路由激活样式,或者直接在路由定义的时候配置全局</p> <p>new VueRouter({<br /> linkActiveClass: &quot;active&quot;<br /> })</p> <p>3、exact 精确匹配参数,这个很有用,在路由默认 &quot;/&quot;的时候,一般都加载到首页,也就是&quot;/&quot;, &quot;/home&quot;其实加载的是同一个组件,但是问题来了,这样路由的激活样式就有问题了,不管跳转到哪个界面 &quot;/&quot;都是出于激活状态的,所以需要精确匹配,这样就解决了这个问题。<br /> 4、tag=&quot;div&quot; 路由跳转时候生成html标签<br /> 5、history路由的控制,<br /> push() 默认 push到Url目录中 /a => /b<br /> append() 追加到当前Url下 /a => /a/b<br /> replace() 替换当前的url /a = /b</p> <p> <router-link :to=&quot;{name: 'Home'}&quot; replace>替换</router-link><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs cs"><code>参数: <span class="hljs-number">1</span>、:to =&gt; :to=<span class="hljs-string">"{name: 'home'}"</span> 跳转的路由name :to=<span class="hljs-string">"{name: 'BookDetails', params: {id: 1}}"</span> 路由跳转参数 获取:<span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.$route.<span class="hljs-keyword">params</span>.id 就可以获取到参数 export <span class="hljs-keyword">default</span> { created() { <span class="hljs-keyword">const</span> bookId = <span class="hljs-keyword">this</span>.$route.<span class="hljs-keyword">params</span>.id }, watch: { <span class="hljs-comment">// 参数路由组件的<a href="http://www.js-code.com/tag/%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f%e9%92%a9%e5%ad%90" title="浏览关于“生命周期钩子”的文章" target="_blank" class="tag_link">生命周期钩子</a>函数不会再调用,created,mounted..., 所以如果要查看,需要监听</span> <span class="hljs-string">'$route'</span> (to, <span class="hljs-keyword">from</span>) { 对路由变化做出响应 } } } 或者 to =&gt; to=<span class="hljs-string">"/home"</span> 跳转路由path <span class="hljs-number">2</span>、active-<span class="hljs-keyword">class</span>=<span class="hljs-string">"active"</span> 路由激活样式,或者直接在路由定义的时候配置全局 <span class="hljs-keyword">new</span> VueRouter({ linkActiveClass: <span class="hljs-string">"active"</span> }) <span class="hljs-number">3</span>、exact 精确匹配参数,这个很有用,在路由默认 <span class="hljs-string">"/"</span>的时候,一般都加载到首页,也就是<span class="hljs-string">"/"</span>, <span class="hljs-string">"/home"</span>其实加载的是同一个组件,但是问题来了,这样路由的激活样式就有问题了,不管跳转到哪个界面 <span class="hljs-string">"/"</span>都是出于激活状态的,所以需要精确匹配,这样就解决了这个问题。 <span class="hljs-number">4</span>、tag=<span class="hljs-string">"<a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a>"</span> 路由跳转时候生成html标签 <span class="hljs-number">5</span>、history路由的控制, push() 默认 push到Url目录中 /a =&gt; /<span class="hljs-function">b <span class="hljs-title">append</span>(<span class="hljs-params"></span>) 追加到当前Url下 /a</span> =&gt; /a/<span class="hljs-function">b <span class="hljs-title">replace</span>(<span class="hljs-params"></span>) 替换当前的url /a</span> = /b &lt;router-link :to=<span class="hljs-string">"{name: 'Home'}"</span> replace&gt;替换&lt;/router-link&gt; </code></pre> <p>6、路由懒加载</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="routes: [ { path: '/home', component: Home, name: 'home' }, { path: '/me', name: 'me', component: resolve => require(['../Me.vue'], resolve) //懒加载<br /> }<br /> ]" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code><span class="hljs-string">routes:</span> [ { <span class="hljs-symbol"> path:</span> <span class="hljs-string">'/home'</span>, <span class="hljs-string">component:</span> Home, <span class="hljs-string">name:</span> <span class="hljs-string">'home'</span> }, { <span class="hljs-symbol"> path:</span> <span class="hljs-string">'/me'</span>, <span class="hljs-string">name:</span> <span class="hljs-string">'me'</span>, <span class="hljs-symbol"> component:</span> resolve =&gt; require([<span class="hljs-string">'../Me.vue'</span>], resolve) <span class="hljs-comment">//懒加载</span> } ]</code></pre> <p>7、app.vue</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template></p> <div id=&quot;app&quot;> <router-link to='home'>首页</router-link><br /> <router-link to='me'>我</router-link><br /> <router-view></router-view> </div> <p></template></p> <p><script> import './assets/css/index.css' // 全局导入css文件 <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { name: &quot;app&quot;, data() { return { msg: &quot;hello world!&quot; }; } }; </script></p> <p>// scoped 标识这个css样式只对这个组件有用</p> <style scoped> /* 可以在里面写css 或者使用 @import 导入外部的css */ @import './assets/css/index.css'; </style> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">router-link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">'home'</span>&gt;</span>首页<span class="hljs-tag">&lt;/<span class="hljs-name">router-link</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">router-link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">'me'</span>&gt;</span>我<span class="hljs-tag">&lt;/<span class="hljs-name">router-link</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">router-view</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">router-view</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">import</span> <span class="hljs-string">'./assets/css/index.css'</span> <span class="hljs-comment">// 全局导入css文件</span> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">name</span>: <span class="hljs-string">"app"</span>, data() { <span class="hljs-keyword">return</span> { <span class="hljs-attr">msg</span>: <span class="hljs-string">"hello world!"</span> }; } }; </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> // scoped 标识这个css样式只对这个组件有用 <span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">scoped</span>&gt;</span><span class="css"> <span class="hljs-comment">/* 可以在里面写css 或者使用 @import 导入外部的css */</span> @<span class="hljs-keyword">import</span> <span class="hljs-string">'./assets/css/index.css'</span>; </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span> </code></pre> <p>源码<br />github: <a href="https://github.com/zxc19890923/vue-router/upload/master" rel="nofollow noreferrer" target="_blank">https://github.com/zxc1989092...</a></p> <p>案例:</p> <p><span class="img-wrap"><img data-src="/img/bVbebRB?w=2546&amp;h=1014" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>路由代码,实现懒加载</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import Vue from 'vue' import Router from 'vue-router' import Home from '../components/Home' import OrderList from '../components/OrderList' Vue.use(Router) export default new Router({ base: __dirname, routes: [ { path: '/home', name: 'Home', component: Home, redirect: '/home/order-list', // 重定向 children: [ { path: 'order-list', component: OrderList, name: 'order-list' }, { path: 'user-list', component: resolve => require(['../components/UserList.vue'], resolve),<br /> name: 'user-list'<br /> },<br /> {<br /> path: 'engineer-list',<br /> component: resolve => require(['../components/EngineerList.vue'], resolve),<br /> name: 'engineer-list'<br /> }<br /> ]<br /> },<br /> {<br /> path: '/about',<br /> name: 'About',<br /> component: resolve => require(['../components/About.vue'], resolve)<br /> },<br /> {<br /> path: '/product',<br /> name: 'Product',<br /> component: resolve => require(['../components/Product.vue'], resolve)<br /> },<br /> {<br /> path: '/',<br /> redirect: 'home'<br /> }<br /> ]<br /> })<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span> <span class="hljs-keyword">import</span> Router <span class="hljs-keyword">from</span> <span class="hljs-string">'vue-router'</span> <span class="hljs-keyword">import</span> Home <span class="hljs-keyword">from</span> <span class="hljs-string">'../components/Home'</span> <span class="hljs-keyword">import</span> OrderList <span class="hljs-keyword">from</span> <span class="hljs-string">'../components/OrderList'</span> Vue.use(Router) <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">new</span> Router({ base: __dirname, routes: [ { path: <span class="hljs-string">'/home'</span>, name: <span class="hljs-string">'Home'</span>, component: Home, redirect: <span class="hljs-string">'/home/order-list'</span>, <span class="hljs-comment">// 重定向</span> children: [ { path: <span class="hljs-string">'order-list'</span>, component: OrderList, name: <span class="hljs-string">'order-list'</span> }, { path: <span class="hljs-string">'user-list'</span>, component: <span class="hljs-function"><span class="hljs-params">resolve</span> =&gt;</span> <span class="hljs-built_in">require</span>([<span class="hljs-string">'../components/UserList.vue'</span>], resolve), name: <span class="hljs-string">'user-list'</span> }, { path: <span class="hljs-string">'engineer-list'</span>, component: <span class="hljs-function"><span class="hljs-params">resolve</span> =&gt;</span> <span class="hljs-built_in">require</span>([<span class="hljs-string">'../components/EngineerList.vue'</span>], resolve), name: <span class="hljs-string">'engineer-list'</span> } ] }, { path: <span class="hljs-string">'/about'</span>, name: <span class="hljs-string">'About'</span>, component: <span class="hljs-function"><span class="hljs-params">resolve</span> =&gt;</span> <span class="hljs-built_in">require</span>([<span class="hljs-string">'../components/About.vue'</span>], resolve) }, { path: <span class="hljs-string">'/product'</span>, name: <span class="hljs-string">'Product'</span>, component: <span class="hljs-function"><span class="hljs-params">resolve</span> =&gt;</span> <span class="hljs-built_in">require</span>([<span class="hljs-string">'../components/Product.vue'</span>], resolve) }, { path: <span class="hljs-string">'/'</span>, redirect: <span class="hljs-string">'home'</span> } ] }) </code></pre> <p>目录结构</p> <p><span class="img-wrap"><img data-src="/img/bVbebRW?w=373&amp;h=309" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>源码地址<br /><a href="https://github.com/zxc19890923/vue-router-demo" rel="nofollow noreferrer" target="_blank">https://github.com/zxc1989092...</a></p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

vue路由配置

全部内容,希望文章能够帮你解决

vue路由配置

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过