vue-router如何使用?,vue-router使用步骤

最新推荐文章于 2024-07-23 16:00:30 发布

vvccyyqq

最新推荐文章于 2024-07-23 16:00:30 发布

阅读量615

点赞数

分类专栏： html 文章标签： vue.js javascript 前端

原文链接：http://www.hongjin2.com/thread-1799-1-1.html

版权

html 专栏收录该内容

187 篇文章 2 订阅

订阅专栏

Vue 何时适合用组件？何时适合用路由？

。

router:根据不同的地址跳转到不同的页面一、vue-router的使用1.下载路由模块npmvue-router--save2.在中先引入路由importRouterfrom'vue-router'接着通过use在vue全局注册使用（Router）最后将路由表导出exportdefaultnewrouter({})3.在中引入路由组件importrouterfrom'./router'4.以参数的形式写到根目录中在vue实例对象中声明router5.最后在的模板中设置路由出口二、添加组件步骤：1.在src的components下添加组件2.在的script标签引入新添的组件importapplefrom'./componets/apple'在data后注册每个组件components:{apple}在template标签里用组件名写一个标签3.通过命令npmrundev运行项目查看组件是否添加成功三、将组件添加到路由表的步骤：1.安装路由npminstallvue-router--save2.将components里的组件引入配置到中先引入组件import...再配置路由路径3.在中使用router先引入路由import...再在vue实例中指定router4.在中模板中添加路由链接router-link和出口router-view。

谷歌人工智能写作项目：小发猫

vue router 怎么配置

typescript入门到精通，学typescript需要什么基础么。

import Vue from 'vue'import Router from 'vue-router'// 先引入vue 和 router// 再引入对应的路由的模板import login from '@/components/login'import home from '@/components/home'import home1 from '@/components/home1'import home2 from '@/components/home2'// 注入依赖(Router)(vueResource)// 配置路由export default new Router({ routes: [ { // 可以直接使用path 访问该路由也可以使用name path: '/', name: 'login', component: login // 上面引入的模板 }, { path: '/home', // home页面有两个子组件分别为home1 和 home2 component: home, name: 'home', redirect: '/home/home1', children: [ { path: '/home/home1', component: home1, name: 'home1' }, { path: '/home/home2', component: home2, name: 'home2' } ] } ]})。