什么？你还不会搭建路由组件？保姆级教程教你搭建路由

Hello！今天也是小白友好文章哦~

（1）话不多说，怎么搭建路由组件呢，首先我们得下载vue-router，指令：

npm install --save vue-router

注意：vue2不适合过高版本的vue-router，下载的时候擦亮眼睛看看你是否需要：

npm install --save vue-router@版本

但是有的小伙伴粗心大意（比如我）就下错了，导致页面空白，怎么办嘞？
可以使用：

npm i vue-router@版本 -legacy-peer-deps

实现版本共存，记得去package.json里面看看"vue-router"版本是否更新，然后重新npm run serve打开页面就好。

（2）然后需要小伙伴们去分析做切换的路由组件都有什么，就比如电商项目，它有主页Home、登录页Login、注册页Register、搜索页Search…，那么就可以建立pages或者views文件夹，因为它们经常用来存放路由组件。

在路由组件里面写上你需要实现的需求，就可以进入下一步了。

（3）第三步：配置路由。

项目中配置路由一般放在router文件夹中，src/router/index.js。基本配置操作如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
//使用插件
Vue.use(VueRouter)
//引入路由组件
.....
//配置路由（以一级路由为例）
export default new VueRouter({
	//配置
	routes:[
		{
			path:'/...',
			component:...
		},
		...
		//重定向
		{
			path:'*',
			redirect:'/...'
		}
	]
})

（4）第四步：main.js中引入路由。

import Vue from 'vue'
import App from './App.vue'
// 引入路由
import router from '@/router'
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  // 注册路由
  router
}).$mount('#app')

（5）别忘了，App.vue中要写上路由组件出口的地方。

<template>
  <div>
    ...
    <!-- 路由组件出口的地方 -->
    <router-view></router-view>
    ...
  </div>
</template>

（6）添加编程式路由导航、声明式路由导航。

注意：声明式能干的，编程式都可以，编程式还可以进行一些其他的业务逻辑。

声明式举例：比如登录、注册

<!-- 声明式路由导航 -->
<router-link to="/login">登录</router-link>
<router-link to="register">免费注册</router-link>

编程式举例：比如搜索按钮

<!-- 编程式路由导航@click="goSearch" -->
<button type="button" @click="goSearch">搜索</button>

不要忘记在script标签里面写个methods写上回调：

<script>
export default {
  name: "MyIndex",
  methods: {
    // 搜索按钮的回调函数，需要向search路由进行跳转
    goSearch(){
      this.$router.push("/search")
    }

  },
};
</script>

遇见路由搭建不要慌，一步步来就好啦！
最后分享一些知识点：
1.路由组件和非路由组件的区别？

（1）路由组件一般放在pages/views文件夹，非路由组件一般放在components文件夹；
（2）路由组件要在router文件夹注册，在main.js引入等等，非路由组件以标签形式使用即可；
（3）注册完路由，无论是路由组件还是非路由组件都有$route和$router属性。

2.$route和$router属性

$route一般用来获取路由信息，路径、params、query…
$router可以在编程式路由导航的时候进行路由跳转。

漂亮的哥哥姐姐点个赞再走嘛~比心