Vue路由

基于vue-router实现组件化的页面切换

如何进行组件化进行开发：

1.将所有组件都拆分出来放在文件夹components里面。

2.将项目涉及的每个页面看成是一个组件。

3.然后在每个页面中引入需要构成视图的组件，将组件在该页面中嵌套成一个具体的页面。

4.再通过入口文件进行加载和初始化。

使用单文件组件实现组件化开发：

规范：

1.编码注释规范

2.项目目录结构规范

----components 存放所有的组件

----js 需要依赖js文件//（可以将这个js文件夹放在assets里面）

----build 打包以后js文件都放在build文件夹里面

----template 存放页面组件

----assets 将需要使用的任何资源都放在assets里面

----index.html

----app.js 入口文件

----webpack.config.js

3.实现组建化开发：

（1）.将目前可用组件都拆分成components

（2）.将页面看成组件 template里面

新建index.vue 作为首页 页面的组件

（3）直接在app.js初始化页面

vue-router如何去使用：

1.在index.html中引入js库 vue-router.js

2.在app.js里面引入一些被切换的页面 一般为.vue格式

3.需要在跳转的地方加上属性

v-link="{path:'/当前要跳转的路径'}"

4.还需要在页面中，声明一个指令去存放不同页面

<router-view></router-view>

5.启动路由

①：在入口文件app.js中，声明空对象

②：实例化路由

③：通过 路由实例 .map({}) 路由具体配置

④：通过 路由实例 .start(Obj,'#app');

路由实例 .start(Obj,'管理边界id');

6.路由间的嵌套

当前路由里面嵌套路由

举例：/shop

/shop/detail

实现二级路由：

a: v-link进行配置 v-link="{path:'/一级请求/二级请求'}"

b: map里面进行配置 通过一个属性subRoutes属性，如果希望在哪个一级请求里面去配置二级路由，就在那个一级请求里面去写subRoutes属性。

7.如何进行值传递

a:直接在v-link后面通过参数附加就可以了，search属性，query属性

I:值写在v-link里面

II:得到值在新切入的组件里面

III:ver-router实例

（1）：只要被vue路由处理过的组件，vue实例都被注入到组件内部

组件内部可以通过this.$route获取 组件内部的vue路由实例。

（2）：使用v-link进行传值的时候，传递的值也会被添加到对应vue路由实例里面，可以在这个组件内部的模板里面通过{{获取传递的值}}

8.路由钩子函数使用 （额外属性）

钩子函数:指的是系统一旦发生改变，就立即去通知对应处理的函数，

钩子函数，从内到外提供的函数，让我们可以手动控制路由

a:当前路由实例.beforeEach();

指的是获取浏览器当前hash 刚好与map里面开始匹配的时候

beforeEach全局的 返回值 返回true 路由继续执行

返回false 路由停止匹配

b:当前路由实例.afterEach();

指的是获取浏览器当前hash 与map里面匹配结束的时候

9.路由的另外一种使用方法

router.go();方法的使用,用途就是除了在超连接以外去打开地址如：<button></button>

router.go({path:'/go',query:{goodsName:'xxxxxxx'}});