一 .动态路由
在某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，希望是如下的路径：
/user/aaaa或/user/bbbb
除了有前面的/user之外，后面还跟上了用户的ID
这种path和Component的匹配关系，我们称之为动态路由(也是路由传递数据的一种方式)。
demo步骤
1.
二 .懒加载
先看一下不用懒加载的话,项目打包后的JS结构,所有的业务代码都放在了一个js里
如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了
路由懒加载做了什么?
路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块.只有在这个路由被访问到的时候, 才加载对应的组件
使用懒加载的方式对比以及打包后的效果对比
Vue router懒加载的方式有三种
方式一: 结合Vue的异步组件和Webpack的代码分析.
const Home = resolve => { require.ensure(['../components/Home.vue'], () => { resolve(require('../components/Home.vue')) })};
方式二: AMD写法
const About = resolve => require(['../components/About.vue'], resolve);
方式三: 在ES6中, 我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割.
const Home = () => import('../components/Home.vue')
-
对于ES6中代码懒加载方式有两种写法
写法一:导入和映射分离写法
写法二:导入和映射合并写法
三 嵌套路由
嵌套路由是一个很常见的功能
比如在home页面中, 我们希望通过/home/news和/home/message访问一些内容.
一个路径映射一个组件, 访问这两个路径也会分别渲染两个组件.
嵌套路由配置方式
四. 路由传参
传递参数主要有两种类型: params和query
-
params的类型:
- 配置路由格式:
{ path: '/user/:userid',component: ()=> import('../components/user') } - 路由连接上在to组件后跟上对应的值
<router-link：to="/user/'+userId">用户</router-link> - 传递后在URL形成的路径: /router/123, /router/abc
- 我们也可以直接取值在本组件用:{{$route.params.userid}}
- 配置路由格式:
-
query的类型:
- 配置路由格式: /router, 也就是普通配置
- 传递的方式: 对象中使用query的key作为传递方式
-
传递后形成的路径: /router?id=123, /router?id=abc<router-link>方式,直接在router-link里写JavaScript
使用它们也有两种方式: <router-link>的方式和JavaScript代码方式
<router-link>方式
JavaScript代码方式
$route和$router是有区别的
$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法
$route为当前router跳转对象,里面可以获取name、path、query、params等
