vuex全家桶系列01-vue-router的介绍和下载

1.vue-router的安装：

• npm i vue-router -S
• 如果是通过vue-create learn_router创建的项目，那么可以直接在创建的时候进行配置

安装完vue-router后,需要在main.js中引入并且使用：

import Vue from 'vue'
import App from './App.vue'
import router from "./router"; //router/index.js

Vue.config.productionTip = false

new Vue({
  //4、挂载到vue实例上
  router,
  render: h => h(App)
}).$mount('#app')

🍊推荐使⽤:vue add router 添加插件(记得提前提交)

2.基本使用：

1.src/router目录下的index.js:

import Vue from "vue";
//😁1、导入 vuerouter
import VueRouter from "vue-router";
//😆2、模块化机制，使用vuerouter
Vue.use(VueRouter);
import Home from "@/views/Home";
import About from "@/views/About";
//🤣3、创建路由器对象，并在VueRouter中配置路由信息对象
export default new VueRouter({
  routes:[
    {
      path:"/",
      component:Home
    },
    {
      path:"/about",
      component:About
    },
  ]
})

src目录下需要有个views的文件夹，用于存放路由需要渲染的组件

🍊 main.js文件中需要对router对象进行一个挂载:

import Vue from 'vue'
import App from './App.vue'

import router from "./router";
Vue.config.productionTip = false

new Vue({
  //🤪4、挂载到vue实例上
  router,
  render: h => h(App)
}).$mount('#app')

2.App.vue中的对路由的使用：

• rouer-link的to属性
• router-view是路由组件的渲染出口

<template>
<div id="app">
    <div id="nav">
        <!-- 使⽤router-link组件来导航 -->
        <!-- 通过传⼊to属性指定连接 -->
        <!-- router-link默认会被渲染成⼀个a标签 -->
        <router-link to="/">首页</router-link>
        <router-link to="/about">关于</router-link>
        <!-- 路由组件的出口 -->
        <router-view></router-view>
    </div>
</div>
</template>

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
}

#nav {
    padding: 30px;
}

#nav a {
    font-weight: bold;
    color: #2c3e50;
}

#nav a.router-link-exact-active {
    color: #42b983;
}
</style>

3.命名路由：(命名路由是可以动态的哈~！)

• 修改之前的src/router目录下的index.js,添加name属性。

  import Vue from "vue";
  //1、导入 vuerouter
  import VueRouter from "vue-router";
  //2、模块化机制，使用vuerouter
  Vue.use(VueRouter);
  import Home from "@/views/Home";
  import About from "@/views/About";
  //3、创建路由器对象，并在VueRouter中配置路由信息对象
  export default new VueRouter({
    routes:[
      {
        path:"/",
        name:"home",
        component:Home
      },
      {
        path:"/about",
        name:"about",
        component:About
      },
    ]
  })
  

• 🍊App.vue文件中将之前的router-link的to属性修改为:to="{name:'home'}"

  <template>
  <div id="app">
      <div id="nav">
          <!-- 使⽤router-link组件来导航 -->
          <!-- 通过传⼊to属性指定连接 -->
          <!-- router-link默认会被渲染成⼀个a标签 -->
          <!-- <router-link to="/">首页</router-link>
          <router-link to="/about">关于</router-link> -->
          <router-link :to="{name:'home'}">首页</router-link>
          <router-link :to="{name:'about'}">关于我</router-link>
          <!-- 路由组件的出口 -->
          <router-view></router-view>
      </div>
  </div>
  </template>
  
  <style>
  #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
  }
  
  #nav {
      padding: 30px;
  }
  
  #nav a {
      font-weight: bold;
      color: #2c3e50;
  }
  
  #nav a.router-link-exact-active {
      color: #42b983;
  }
  </style>