本文摘自PHP中文网,作者(*-*)浩,侵删。
路由是指路由器从一个接口上收到数据包,根据数据包的目的地址进行定向并转发到另一个接口的过程。Vue.js路由允许我们通过不同的URL访问不同的内容。
通过Vue.js可以实现多视图的单页Web应用(single page web application,SPA)。
Vue.js路由需要载入vue-router 库
但是使用路由时,url也是随着改变的,用户浏览到一个网页时可以直接复制或收藏当前页的url给别人,这种方式对于搜索引擎和用户来说都是友好的。
简单实例
Vue.js + vue-router 可以很简单的实现单页应用。
<router-link> 是一个组件,该组件用于设置一个导航链接,切换不同 HTML 内容。 to 属性为目标地址, 即要显示的内容。
以下实例中我们将 vue-router 加进来,然后配置组件和路由映射,再告诉 vue-router 在哪里渲染它们。代码如下所示:
HTML代码
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script src= "https://unpkg.com/vue/dist/vue.js" ></script><script src= "https://unpkg.com/vue-router/dist/vue-router.js" ></script>
<div id= "app" >
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to= "/foo" >Go to Foo</router-link>
<router-link to= "/bar" >Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view></div>
|
JavaScript代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const routes = [
{ path: '/foo' , component: Foo },
{ path: '/bar' , component: Bar }
]
const router = new VueRouter({
routes
})
const app = new Vue({
router
}). $mount ( '#app' )
|
点击过的导航链接都会加上样式 class ="router-link-exact-active router-link-active"。
以上就是vue.js路由是什么的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
vue项目中引入bootstrap的方法
怎么创建vue.js项目
vue.js怎么请求数据
vue.js打包后图片路径错误怎么办
vue.js如何创建项目
vue-cli3.0安装与配置的方法教程(图文)
如何编写出vue.js菜单组件
vue.js全家桶是什么
vue项目能直接引入vue.js吗
vue.js中怎么添加favicon图标
更多相关阅读请进入《vue.js》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » vue.js路由是什么