vue 路由

路由:

vue里面的路由是跳转页面的，底层是 location。

1. 安装路由：

npm install vue-router --save-dev

2. 引入路由：

在main.js文件中引入路由：import vueRouter from ‘vue-router’

3. 挂载路由到Vue上

在main.js文件中挂载路由：Vue.use(vueRouter)

4. 配置项目的路由

在main.js文件中配置路由：

5. 路由的入口

< router-link :to=“路由地址” >< / router-link>
该标签会被解析为 a 标签，可通过a标签设置样式。to中的地址为跳转的地址。

6. 路由的出口

< router-view >< / router-view>。
路由的出口会被解析成div，显示的组件会加载到路由出口处。

7. mode设置

在配置路由的地方设置路径的显示方式：mode:“history”

1. 路由的动态传值

步骤1：在main.js文件中配置路由，路由的格式路径+ 参数，同时引入相应组件。

步骤2：在路由入口处设置跳转路径，并给组件传值

步骤3：在组件中接收传值，并操作渲染页面

2. 路由的get传值

步骤1：在main.js文件中配置路由，路由的格式不写传递的参数，同时引入相应组件。

步骤2：在路由入口处设置跳转路径，并给组件传值

步骤3：在组件中接收传值，并操作渲染页面

编程式导航：不需要配置路由，通过代码实现路由的跳转。
1. 不带参数的跳转

两种方式：

2. 带参数的跳转

两种方式：