vue中的路由

落日映苍穹つ 2021-11-29 22:02 393阅读 0赞

### 文章目录 ###

*   *  什么是路由？
     *  vue-router配置
     *   *  1.安装（\[官网\](https://router.vuejs.org/guide/\#javascript)）
         *  2.在（main.js）引入并vue.use(VueRouter)
         *  3.配置路由
     *  路由实现页面跳转
     *  Vue动态路由和get传值
     *   *  1.动态路由传值：
         *  2.get传值
     *  url的history模式
     *  父子路由（路由的嵌套）
     *  路由的模块化

## 什么是路由？ ##

当我们在根组件的时候，想点哪一个组价就可以挂载哪一个组件，实现这个功能的东西就是路由（动态地往根组件挂载）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX2x1a2FpZmFuZw_size_16_color_FFFFFF_t_70]

## vue-router配置 ##

### 1.安装（[官网][Link 1]） ###

npm install vue-router --save / cnpm install vue-router --save

### 2.在（main.js）引入并vue.use(VueRouter) ###

import VueRouter from 'vue-router'
    Vue.use(VueRouter)

### 3.配置路由 ###

1.创建组件，在main.js中引入组件(也可以从其他文件import进来)

const Foo = { template: '<div>foo</div>' }
    const Bar = { template: '<div>bar</div>' }

2.main.js定义路由（此段建议复制）

const routes = [
      { path: '/foo', component: Foo },
      { path: '/bar', component: Bar },
      { path:'*',redirect:'默认路径'}//重定向，当path为空的时候默认跳转的地址
    ]

3.main.js中实例化vue-router

const router = new VueRouter({
      routes // 此处是缩写，应该是： `routes: routes`（后面的router是第二步的router）
    })

4.main.js中创建和挂载实例（这一步是吧上面实例化的router挂载到main.js的vue实例上）

const app = new Vue({
      router
    }).$mount('#app')

5.将`<router-view></router-view>`放在App.vue（根组件模板）内

**经过以上三步，vue的路由就配置完成！~**  
在url中输入需要进入的组件名（path）即可跳转到该组件中

也可以使用router-link做出类似超链接的点击，实现点击跳转：

<router-link to="/foo">去Foo</router-link>

## 路由实现页面跳转 ##

**1.使用js来实现跳转(常用)：**

this.$router.push({path:'/news/传值'})

**2.使用命名路由进行跳转：**  
在main.js的配置路由部分给路由起个名字

const routes = [
          { path: '/content/:aid', component: Content ,name='content'},
        ]

通过这种方式跳转：  
this.$router.push(\{name=‘content’,params:\{userId:123\}\})

## Vue动态路由和get传值 ##

### 1.动态路由传值： ###

**在跳转前页面的router-link的地方：（给to绑定属性，然后拼接需要传的值）**

<router-link :to="'/content/'+index">
                    {
       {limt}}
                </router-link>

**在main.js里面配置动态路由：（path里面对应地加上：aid）（此处的：aid只是给传过去的值取个名字）**

const routes = [
      { path: '/content/:aid', component: Content },
    ]

**在对应的跳转后界面获取动态路由传过来的值：**

this.$route.params

### 2.get传值 ###

**在跳转前页面的router-link的地方：（给to绑定属性，然后拼接需要传的值）**

<router-link :to="'/content/?id='+index">
                {
       {limt}}
            </router-link>

**在对应的跳转后界面获取get传过来的值：**

this.$route.query

## url的history模式 ##

一般默认的路由跳转的url是hash模式，如：  
[http://180.168.156.212:4101/travel/\#/shouye/shouye][http_180.168.156.212_4101_travel_shouye_shouye]  
可见，有很丑的\#  
因此，我们可以将其改为history模式：  
在main.js的实例化VueRouter的地方：

const router = new VueRouter({
      routes,
      mode:'history'/*将hash改为history*/
    })

就可以了

## 父子路由（路由的嵌套） ##

当我们想实现下面这种功能时：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX2x1a2FpZmFuZw_size_16_color_FFFFFF_t_70 1]  
组件里面又用到了路由  
就可以用到“路由的嵌套”！

首先，在main.js里面将父组件和子组件都引入：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX2x1a2FpZmFuZw_size_16_color_FFFFFF_t_70 2]  
然后，在mian.js里面讲子路由定义在父路由内：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX2x1a2FpZmFuZw_size_16_color_FFFFFF_t_70 3]  
然后在父组件的左边加上跳转连接，在右边加上`<router-view></router-view>`：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX2x1a2FpZmFuZw_size_16_color_FFFFFF_t_70 4]  
此时，在点击左边的链接的时候，右侧就会显示出子组件的内容了！~

## 路由的模块化 ##

在项目中,main.js只有一个，因此，我们不需要将所有的东西都放在这里面，组件引入、路由引入等等。都可以分离出去为一个独立的文件，在main.js里面进行引入就可以了！~  
步骤：

①在mian.js同级目录的地方，新建一个文件夹“router”

②然后在router里面建一个js文件，此处我命名为index.js  
![在这里插入图片描述][20190723155251875.png]  
③在index.js中引入vue：

import Vue from "vue"

④将main.js里面的new vue以上，`import Vue from 'vue'、import App from './App'`以下的内容，全部剪切进index.js  
**注意！！！引入组件的路径从"./“变成了”…/"**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX2x1a2FpZmFuZw_size_16_color_FFFFFF_t_70 5]  
⑤然后在index.js最后一行把这个router暴露出来：

export default router;

⑥最后，在main.js中引入这个index.js

import router from './router/index'

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX2x1a2FpZmFuZw_size_16_color_FFFFFF_t_70]: /images/20211129/7e4b1d58b6ed4dff868ba59fec467e92.png
[Link 1]: https://router.vuejs.org/guide/#javascript
[http_180.168.156.212_4101_travel_shouye_shouye]: http://180.168.156.212:4101/travel/#/shouye/shouye
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX2x1a2FpZmFuZw_size_16_color_FFFFFF_t_70 1]: /images/20211129/361f56b293cf44048e4c0b75c45752c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX2x1a2FpZmFuZw_size_16_color_FFFFFF_t_70 2]: /images/20211129/ce5a6d17152642689235d3a0ef04d654.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX2x1a2FpZmFuZw_size_16_color_FFFFFF_t_70 3]: /images/20211129/f706892e900d4938bebbf80f297d167b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX2x1a2FpZmFuZw_size_16_color_FFFFFF_t_70 4]: /images/20211129/c36c78688e6143218b2add88a16ca2cb.png
[20190723155251875.png]: /images/20211129/60ea2296fcc7438bbf31055c0173e104.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX2x1a2FpZmFuZw_size_16_color_FFFFFF_t_70 5]: /images/20211129/25ae1a45dd7c4484bb41620291e8f2d2.png