无法在这个位置找到: head2.htm
当前位置: 建站首页 > 新闻动态 > 行业新闻 >

vue路由器实例教程之静态数据路由器

时间:2021-04-02 05:20来源:未知 作者:jianzhan 点击:
序言vue的宣传单页面运用是根据路由器和部件的,路由器用以设置浏览相对路径,并将相对路径和部件投射起來。传统式的网页页面运用,是用一些超级链接接来完成网页页面转换和自

序言

vue的宣传单页面运用是根据路由器和部件的,路由器用以设置浏览相对路径,并将相对路径和部件投射起來。传统式的网页页面运用,是用一些超级链接接来完成网页页面转换和自动跳转的。在vue-router宣传单页面运用中,则是相对路径中间的转换,也便是部件的转换。

最先在html中,引进vue-router.js和vue.js,用router-link开启路由器自动跳转,router-link能够像a标识一样应用和界定款式

router-view地区是路由器配对到的部件3D渲染的地区

 script src="vue/dist/vue.js" /script 
 script src="vue-router/dist/vue-router.js" /script 
 div id="app" 
 h1 Hello App! /h1 
 !-- 应用 router-link 部件来导航栏. -- 
 !-- 根据传到 `to` 特性特定连接. -- 
 !-- router-link 默认设置会被3D渲染成一个 ` a ` 标识 -- 
 router-link to="/foo" Go to Foo /router-link 
 router-link to="/bar" Go to Bar /router-link 
 !-- 路由器出入口 -- 
 !-- 路由器配对到的部件将3D渲染在这里里 -- 
 router-view /router-view 
 /div 

随后是js编码

最先界定路由器部件,部件能够是简易的部件(template简易界定就可以),也但是extend界定的繁杂部件

接下去界定路由器投射表,便是界定相对路径和部件中间的投射

随后应用路由器投射表建立路由器目标

最终应用路由器目标建立vue目标,并挂载到特定原素

// 0. 假如应用控制模块化体制程序编写,导进 Vue 和 VueRouter,要启用 Vue.use(VueRouter)
// 1. 界定(路由器)部件。
// 能够从别的文档 import 进去
const Foo = { template: ' div foo /div ' }
const Bar = { template: ' div bar /div ' }
// 2. 界定路由器
// 每一个路由器应当投射一个部件。 ponent" 能够是
// 根据 Vue.extend() 建立的部件结构器,
// 或是,仅仅一个部件配备目标。
// 大家晚点再探讨嵌套循环路由器。
const routes = [
 { path: '/foo', component: Foo },
 { path: '/bar', component: Bar }
// 3. 建立 router 案例,随后传 `routes` 配备
// 你要能够传其他配备主要参数, 但是先那么简易着吧。
const router = new VueRouter({
 routes // (简称)非常于 routes: routes
// 4. 建立和挂载根案例。
// 还记得要根据 router 配备主要参数引入路由器,
// 进而让全部运用都是有路由器作用
const app = new Vue({
 router// (简称)非常于 router: router
}).$mount('#app') // 如今,运用早已起动了!

上例中,路由器投射表案例名叫routes,在建立路由器目标时能够简称,假如不叫routes,例如叫routesa,则建立路由器目标时务必写routes:routesa

建立vue目标时,路由器目标名也一样,假如不叫router,都不能简称

应用extend建立模版

var todoItem = Vue.extend({
 data: function() {
 return {
 todoData: [
 { id: 0, text: '蔬菜水果' },
 { id: 1, text: '奶酪' },
 { id: 2, text: '随意其他什么样的人吃的物品' }
 template: `
 li v-for='(d, i) in todoData' :key="i" 
 {{ d.text }}
 /li 
 /ul 

!DOCTYPE html !-- saved from url=(0077)vue-tutorials/06.Router/#!/home -- html head meta http-equiv="Content-Type" content="text/html; charset=UTF-8" title abc /title link rel="stylesheet" href="bootstrap/3.3.7/css/bootstrap.min.css" link rel="stylesheet" href="./basic_01_files/custom.css" rel="external nofollow" /head body div id="app" div div div h2 Router Basic - 01 /h2 /div /div /div div div div router-link to="/home" Go to Foo /router-link router-link to="/about" Go to Bar /router-link /div /div router-view /router-view /div /div template id="home" div h1 Home /h1 p {{msg}} /p /div /template script src="vue/2.4.2/vue.min.js" /script script src="vue-router/2.7.0/vue-router.min.js" /script script var todoItem = Vue.extend({ data: function() { return { todoData: [ { id: 0, text: '蔬菜水果' }, { id: 1, text: '奶酪' }, { id: 2, text: '随意其他什么样的人吃的物品' } template: ` li v-for='(d, i) in todoData' :key="i" {{ d.text }} /li /ul var t_test = Vue.extend({ data:function(){ return { msg:"hello,test" template:"#home"
script src="vue/dist/vue.js" /script script src="vue-router/dist/vue-router.js" /script /head body div id="app" h1 Hello App! /h1 !-- 路由器出入口 -- !-- 路由器配对到的部件将3D渲染在这里里 -- router-view /router-view /div /body script type="text/javascript" // 0. 假如应用控制模块化体制程序编写,导进 Vue 和 VueRouter,要启用 Vue.use(VueRouter) // 1. 界定(路由器)部件。 // 能够从别的文档 import 进去 const Foo = { template: ' router-link to="/bar" Go to Bar /router-link ' } const Bar = { template: ' router-link to="/foo" Go to Foo /router-link ' } // 2. 界定路由器 // 每一个路由器应当投射一个部件。 ponent" 能够是 // 根据 Vue.extend() 建立的部件结构器, // 或是,仅仅一个部件配备目标。 // 大家晚点再探讨嵌套循环路由器。 const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } // 3. 建立 router 案例,随后传 `routes` 配备 // 你要能够传其他配备主要参数, 但是先那么简易着吧。 const router = new VueRouter({ routes // (简称)非常于 routes: routes // 4. 建立和挂载根案例。 // 还记得要根据 router 配备主要参数引入路由器, // 进而让全部运用都是有路由器作用 const app = new Vue({ router // (简称)非常于 router: router }).$mount('#app') // 如今,运用早已起动了! /script /html

进来的情况下打网站地址

#/foo 或 #/bar

便可以完成foo和bar模版中间相互之间自动跳转

还可以设定默认设置路由器:

const routes = [
 { path: '/', component: Bar },
 { path: '/foo', component: Foo },
 { path: '/bar', component: Bar },
]

小结

之上便是本文的所有內容了,期待文中的內容对大伙儿的学习培训或是工作中具备一定的参照学习培训使用价值,感谢大伙儿对诺心互联网的适用。

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: ajaxfeedback.htm
栏目列表
推荐内容


扫描二维码分享到微信