Vue路由（router）基础知识

1.

（1）安装路由

 （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）在根路径后面有一个“#”，如何取消？

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

 在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 中配置原有属性变量

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