![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue-router
FavoriteStudent
这个作者很懒,什么都没留下…
展开
-
vue-router从入门到精通(一)
vue-router的使用大致分为5步第一步:在src目录下新建一个router文件夹,里面新建index.js文件第二步:在router/index.js中写入router配置import Vue from 'vue'import Router from 'vue-router'之后我们需要把vue-router作为插件Vue.use(Router)然后添加配置...原创 2018-06-27 11:44:03 · 358 阅读 · 0 评论 -
vue-router从入门到精通(二)
上一期,我们讲过vue-router的基本使用,这一期,我们讲一下<router-link>标签的使用以及配置<template> <div id="app"> <ul> <router-link to="/home" tag="li">home</router-link&原创 2018-06-27 14:32:08 · 261 阅读 · 0 评论 -
vue-router从入门到精通之动态路由(三)
这一节,我们讲讲动态路由是如何使用的,动态路由我们也可以理解为路由传参,这样就容易理解了吧let router = new VueRouter({ mode: 'history', linkActiveClass: 'is-active', routes: [{ path: '/home/:id', component: home }]})这里,上述形式即为动态路...原创 2018-06-27 15:48:04 · 247 阅读 · 0 评论 -
vue-router从入门到精通之命名视图(四)
应用场景,当我们想同时展示多个视图,而不是嵌套展示。如:sidebar(侧导航)和main(主内容)两个视图,这个时候命名视图就派上用场了。我们可以在界面中拥有多个单独命名的视图,而不是只有一个单独的出口。如果router-view没有设置名字,那么默认为default <router-view class="center"></router-view> &l...原创 2018-06-27 16:22:14 · 526 阅读 · 0 评论 -
vue-router从入门到精通之重定向和别名(五)
vue-router的重定向根据router实例化时的配置来设置{ path: '/home', redirect: '/document', }上述代码表示从/home重定向到/document重定向的目标也可以是一个命名的路由{ path: '/home/:id', redirect: {name: 'document'} }, { path...原创 2018-06-27 17:14:34 · 473 阅读 · 0 评论