Vue路由（router）基础知识

逃离我推掉我的手 2022-03-02 17:24 234阅读 0赞

（1）安装路由

![20190320223232381.png][]

（2）在main.js文件中创建路由并引入组件

import Vue from 'vue'
    import App from './App.vue'
    // import router from './router'
    
    Vue.config.productionTip = false
    
    //路由设置
    import Router from 'vue-router' //在main.js中引入路由router
    import Home from './views/Home.vue' // 引入Home组件
    import About from './views/About' // 引入About组件,可以不加后缀.vue，名为About的文件唯一
    Vue.use(Router)//Vue调用路由
    
    const router = new Router({  //创建路由对象，对象里面的属性可以对路由进行设置
      routes: [
        {
          path: '/',  //根路径
          component: Home //设置Home组件为根路径内容
        },
        {
          path: '/about',
          component: About,
        }
      ]
    })
    
    console.log(App);//vue loader会将vue文件变为对象形式。
    new Vue({
      router, //Vue实例中引入路由
    
      //render函数必须接受一个对象作为参数
      render: h => h(App)
    }).$mount('#app')

（3）在根路径后面有一个“\#”，如何取消？

![2019032023005472.png][]

还记得在安装vue-router的时候，**路由器使用历史模式?(需要为生产中的索引回退设置适当的服务器)**

![20190320230355648.png][]

在router对象中，属性mode设置为history

const router = new Router({  //创建路由对象，对象里面的属性可以对路由进行设置
      routes: [
        {
          path: '/',  //根路径
          component: Home //设置Home组件为根路径内容
        },
        {
          path: '/about',
          component: About,
        }
      ],
      mode: 'history'  //设置模式，效果：取消根路径后面的“#”
    })

**（4）在App.vue 中，<router-view/>标签的作用是让路由配置的组件在页面中显示。router-view就是组件内容。**

<template>
      <div id="app">
        <div id="nav">
          <router-link to="/">Home</router-link> |
          <router-link to="/about">About</router-link>
        </div>
        <router-view/>
      </div>
    </template>

（5）router-link标签，点击跳转到指定路径中，类似于a标签，但是a标签每次跳转都会刷新重新加载，而router-link，已经加载过的页面，再次跳转到这里时，不再重新加载。**经解析编译router-link在渲染的时候就是a标签**

**to="path" path是router中路由对应path值   和  :to="\{name: 值\}" 路由中对应的name值**

<template>
      <div id="app">
        <router-link to="/">Home</router-link>
        <router-link to="/about">About</router-link>
        <router-view/>
      </div>
    </template>

注意：to属性也可以绑定动态的值，表达式**:to** = "data中传来的值"

**路由跳转的另一种方法：**绑定一个对象，对象中的name属性和属性值，是有router对象设置的

App.vue中的写法：

<template>
      <div id="app">
        <router-link :to="{name: 'home'}">Home</router-link>
        <router-link :to="{name: 'about'}">About</router-link>
        <router-view/>
      </div>
    </template>

main.js中router对象的写法，添加一个name属性：

const router = new Router({  //创建路由对象，对象里面的属性可以对路由进行设置
      routes: [
        {
          path: '/',  //根路径
          name: 'home',
          component: Home //设置Home组件为根路径内容
        },
        {
          path: '/about',
          name: 'about',
          component: About,
        }
      ],
      mode: 'history'  //设置模式，效果：取消根路径后面的“#”
    })

2. 也可以通过一个router.js文件，单独来配置路由，将所有**涉及到的路由都需要配置到这个文件中**

（1）在main.js中引入router

import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    
    Vue.config.productionTip = false
    
    console.log(App);//vue loader会将vue文件变为对象形式。
    new Vue({
      router, //Vue实例中引入路由
    
      //render函数必须接受一个对象作为参数
      render: h => h(App)
    }).$mount('#app')

（2）在router.js中配置路由

import Vue from 'vue'
    import Router from 'vue-router'
    //下面的路径引入
    import Home from './views/Home.vue'
    import About from './views/About.vue'
    import Community from './views/Community.vue'
    import Learn from './views/Learn.vue'
    import Study from './views/Study.vue'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'home',
          component: Home
        },
        {
          path: '/about',
          name: 'about',
          component: About
          // component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
        },
        {
          path: '/community',
          name: 'community',
          component: Community
        },
        {
          path: '/learn',
          name: 'learn',
          component: Learn
        },
        {
          path: '/study',
          name: 'study',
          component: Study
        },
      ],
      mode: 'history'
    })

（3）在App.vue中使用路由标签 <router-link to="">和<router-view/>

<template>
      <div id="app">
        <router-link :to="{name: 'home'}">Home</router-link>
        <router-link :to="{name: 'about'}">About</router-link>
        <router-link to="learn">Learn</router-link>
        <router-link to="study">Study</router-link>
        <router-link to="community">Community</router-link>
        <router-view/>
      </div>
    </template>

**3. css文件引入到main.js文件中就会作用到全局**

import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import './assets/styles/reset.css' //css文件引入到main.js文件中就会作用到全局
    
    Vue.config.productionTip = false
    
    console.log(App);//vue loader会将vue文件变为对象形式。
    new Vue({
      router, //Vue实例中引入路由
    
      //render函数必须接受一个对象作为参数
      render: h => h(App)
    }).$mount('#app')

** 4. router-link标签在解析后默认为a标签，但也可以设置成别的标签，比如：tag="li"**

<ul class="nav">
              <router-link :to="{name: 'home'}" tag="li">Home</router-link>
              <router-link :to="{name: 'about'}" tag="li">About</router-link>
              <router-link to="learn" tag="li">Learn</router-link>
              <router-link to="study" tag="li">Study</router-link>
              <router-link to="community" tag="li">Community</router-link>
          </ul>

5. 在router.js 中配置原有属性变量

![20190322160145996.png][]

这样就可以直接使用active和exact来进行样式设置了

[20190320223232381.png]: /images/20220302/f1526355a67947c78700dfdf797bca9b.png
[2019032023005472.png]: /images/20220302/186cfcf6b4704de6bd38a64bf3bacb4c.png
[20190320230355648.png]: /images/20220302/7f4502791cc544efa7d0660607a2038b.png
[20190322160145996.png]: /images/20220302/d0ad65c86b2c4d2fbf91671efe044f7f.png