做网站用到什么技术,南坪网站建设,wordpress支付宝扫码支付,图片素材网站建设Vue.js vue-router 可以很简单的实现单页应用。 router-link 是一个组件#xff0c;该组件用于设置一个导航链接#xff0c;切换不同 HTML 内容。 to 属性为目标地址#xff0c; 即要显示的内容。 以下实例中我们将 vue-router 加进来#xff0c;然后配置组件和路…Vue.js vue-router 可以很简单的实现单页应用。 router-link 是一个组件该组件用于设置一个导航链接切换不同 HTML 内容。 to 属性为目标地址 即要显示的内容。 以下实例中我们将 vue-router 加进来然后配置组件和路由映射再告诉 vue-router 在哪里渲染它们。代码如下所示 HTML代码 script srchttps://unpkg.com/vue/dist/vue.js/script
script srchttps://unpkg.com/vue-router/dist/vue-router.js/scriptdiv idapph1Hello App!/h1p!-- 使用 router-link 组件来导航. --!-- 通过传入 to 属性指定链接. --!-- router-link 默认会被渲染成一个 a 标签 --router-link to/fooGo to Foo/router-linkrouter-link to/barGo to Bar/router-link/p!-- 路由出口 --!-- 路由匹配到的组件将渲染在这里 --router-view/router-view
/div JS代码 /* 如果使用模块化机制编程导入Vue和VueRouter要调用 Vue.use(VueRouter) *//* 1. 定义路由组件工程化后可以从其他文件 import 进来*/var Foo { template: divfoo/div }var Bar { template: divbar/div }/*2. 定义路由每个路由应该映射一个组件。 其中component 可以是通过 Vue.extend() 创建的组件构造器选讲了解即可或者只是一个组件配置对象。晚点再讨论嵌套路由选讲了解即可。*/var routes [{ path: /foo, component: Foo },{ path: /bar, component: Bar }]/*3. 创建 router 实例然后传 routes 配置还可以传别的配置参数, 先这么简单着吧*/var router new VueRouter({routes:routes // 可以缩写为routes})/*4. 创建和挂载根实例。记得要通过 router 配置参数注入路由从而让整个应用都有路由功能*/var routeArea new Vue({router:router}).$mount(.routeArea) .转载于:https://www.cnblogs.com/jianxian/p/10650557.html
