路由的使用流程

来源:互联网 发布:在淘宝买复合弓靠谱吗 编辑:程序博客网 时间:2024/04/29 00:23

SPA 单页面应用

创建单个路由组件,about.vue,home.vue,在路由组件内写上要显示的内容 ,向外暴露出路由组件,在路由器文件中index里引入vue 和VueRouter库,引入前边的about,home组件,声明在vue中使用路由器Vue.use(VueRouter),new VueRouter 生成路由的实例对象,配置多个路由在app.vue主路由组件中写的是有跳转功能的路由链接标签和显示指定路由里内容的标签

1创建路由组件 .vue格式

2创建路由器 index.js格式

3在index文件里映射路由 创建路由配置对象

4在app.vue主组件中 使用 <router-link to=''> <router-link/>  <router-view>显示路由组件<router-view/>

router-link 组件支持用户在具有路由功能的应用中点击 导航 跳转到点击的页面

router-view 是能够显示当前指定路由地址的内容

5在main.js入口文件中引入路由器  

6启动路由