好资源导航 » 文章资讯 » vue路由教程之静态路由

vue路由教程之静态路由

2023-08-15 08:11:04 71

前言

vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。

首先在html中，引入vue-router.js和vue.js，用router-link触发路由跳转，router-link可以像a标签一样使用和定义样式

router-view区域是路由匹配到的组件渲染的地方





HelloApp!




GotoFoo
GotoBar

然后是js代码

首先定义路由组件，组件可以是简单的组件（template简单定义即可），也可是extend定义的复杂组件

接下来定义路由映射表，就是定义路径和组件之间的映射

然后使用路由映射表创建路由对象

最后使用路由对象创建vue对象，并挂载到指定元素

//0.如果使用模块化机制编程，导入Vue和VueRouter，要调用Vue.use(VueRouter)

//1.定义（路由）组件。
//可以从其他文件import进来
constFoo={template:'foo'}
constBar={template:'bar'}

//2.定义路由
//每个路由应该映射一个组件。其中"component"可以是
//通过Vue.extend()创建的组件构造器，
//或者，只是一个组件配置对象。
//我们晚点再讨论嵌套路由。
constroutes=[
{path:'/foo',component:Foo},
{path:'/bar',component:Bar}
]

//3.创建router实例，然后传`routes`配置
//你还可以传别的配置参数,不过先这么简单着吧。
constrouter=newVueRouter({
routes//（缩写）相当于routes:routes
})

//4.创建和挂载根实例。
//记得要通过router配置参数注入路由，
//从而让整个应用都有路由功能
constapp=newVue({
router//（缩写）相当于router:router
1
}).$mount('#app')//现在，应用已经启动了！

上例中，路由映射表实例名为routes，在创建路由对象时可以缩写，如果不叫routes，比如叫routesa，则创建路由对象时必须写routes:routesa

创建vue对象时，路由对象名也一样，如果不叫router，也不能缩写

使用extend创建模板

vartodoItem=Vue.extend({
data:function(){
return{
todoData:[
{id:0,text:'蔬菜'},
{id:1,text:'奶酪'},
{id:2,text:'随便其它什么人吃的东西'}
]
};
},
template:`


{{d.text}}


`,

});


Home={template:'foo'}
About={template:'bar'}

routes=[
{path:'/home',component:Home},
{path:'/about',component:todoItem}
]

router=newVueRouter({
routes:routes//（缩写）相当于routes:routes
});

app=newVue({
router:router
}).$mount('#app');

还可以这样写template







abc









RouterBasic-01

GotoFoo GotoBar

Home

如果不需要固定的导航链接，可以把router-link放在模板里面：






abc






HelloApp!









//0.如果使用模块化机制编程，导入Vue和VueRouter，要调用Vue.use(VueRouter)

//1.定义（路由）组件。
//可以从其他文件import进来
constFoo={template:'GotoBar'}
constBar={template:'GotoFoo'}

//2.定义路由
//每个路由应该映射一个组件。其中"component"可以是
//通过Vue.extend()创建的组件构造器，
//或者，只是一个组件配置对象。
//我们晚点再讨论嵌套路由。
constroutes=[
{path:'/foo',component:Foo},
{path:'/bar',component:Bar}
]

//3.创建router实例，然后传`routes`配置
//你还可以传别的配置参数,不过先这么简单着吧。
constrouter=newVueRouter({
routes//（缩写）相当于routes:routes
})

//4.创建和挂载根实例。
//记得要通过router配置参数注入路由，
//从而让整个应用都有路由功能
constapp=newVue({
router//（缩写）相当于router:router

}).$mount('#app')//现在，应用已经启动了！

进去的时候打网址

xxx/xx.html#/foo或xxx/xx.html#/bar

就可以实现foo和bar模板之间互相跳转

也可以设置默认路由：

constroutes=[
{path:'/',component:Bar},
{path:'/foo',component:Foo},
{path:'/bar',component:Bar},

]

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对毛票票的支持。

返回顶部
514930285
czq8825@qq.com

vue路由教程之静态路由

HelloApp!

RouterBasic-01

Home

HelloApp!

热门推荐

随机推荐