你好，我是“Vue路由”

        路由，在数据通讯时，帮你选择通信的路线，在vue中的路由能够帮助我们在一个vue组价中实现其他组件的切换，也就是说可以通过路由模块将指定的组件显示在路由视图中 

目录

一、路由的基本使用

1.1 安装路由

1.2 安装路由依赖

1.3 设计路由界面

1.4 创建静态路由表

1.5 在main.js中引入路由模块并使用

1.6 实现路由

二、路由的参数传递：

三、实现跳转的两种方式：

四、路由安装中可能出现的问题：

---

一、路由的基本使用

1.1 安装路由

        创建Vue项目并引入路由，首先创建一个vue-cli项目，具体步骤请参考链接：Vue-cli脚手架工具的安装及基本使用_暇光署墨的博客-CSDN博客，进入项目后在命令行输入指令，进行路由的安装

npm install vue-router -s

1.2 安装理由依赖

        等待路由安装完成后执行下列命令，下载安装路由依赖

npm install

1.3 设计路由界面

        在src新建‘components’文件夹，新建五个Component，Login.vue 、Main.vue 、pdproduct.vue、PhoneProduct.vue、Register.vue（根据需要而定）；

 Login.vue：

<template>
    <div id="app">
      <h1>Login</h1>
    </div>
</template>

<script>
    export default {
        name: 'app',
        data () {
            return {
                
            }
        }
    }
</script>

<style>

</style>

 Main.vue

<template>
    <div id="app">
      <h1>Main</h1>
    </div>
</template>

<script>
    export default {
        name: 'app',
        data () {
            return {
                msg: 'Welcome to Your Vue.js App'
            }
        }
    }
</script>

<style>

</style>

 pdproduct.vue

<template>
  <div id="app">

    <h1>家电</h1>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data () {
      return {
       
      }
    }
  }
</script>

<style>

</style>

PhoneProduct.vue

<template>
  <div id="app">
    <h1>手机</h1>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data () {
      return {
      
      }
    },created(){
        console.log(this.id);
    }
  }
</script>

<style>

</style>

 Register.vue

<template>
  <div id="app">
    <h1>Register</h1>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>

<style>

</style>

 1.4 创建静态路由表

           在src目录下新建‘router’ 文件夹，内存放路由的静态路由表，新建index.js文件作为路由的主配置文件，router为一个数组，每个路由都是一个对象，用大括号包裹

/**
 * Created by 25037 on 2022/5/12.
 */
import Vue from 'vue'
import VueRouter from 'vue-router'

//组件通过export暴露接口，路由中导入组件
import Login from '../components/Login.vue'
import Main from '../components/Main.vue'
import Register from '../components/Register.vue'
import  PhoneProduct from '../components/PhoneProduct.vue'
import  PdProduct from '../components/PdProduct.vue'

//导入vue-router依赖
Vue.use(VueRouter);

export default new VueRouter({
  routes: [
    {
      path: '/login', //跳转路径
      name: 'login',  //名称
      component: Login  //组件
    },{
      path: '/main', //跳转路径
      name: 'main',  //名称
      component: Main  //组件
    },
    {
      path: '/register', //跳转路径
      name: 'register',  //名称
      component: Register  //组件
    },
    {
      path: '/PhoneProduct', //跳转路径
      name: 'PhoneProduct',  //名称
      component: PhoneProduct  //组件
    },
    {
      path: '/PdProduct', //跳转路径
      name: 'PdProduct',  //名称
      component: PdProduct  //组件
    }
  ]
})

   1.5 在main.js中引入路由模块并使用     

        在main.js中引入路由的主配置文件，只需要添加路由配置文件目录的路径，就会扫描到

import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false


new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

1.6 实现路由

        路由配置及引入到此已经结束了，要想在页面中能够显示出来。我们还需要两个标签<router-link>、<router-view>。我们只需要在App.vue中<template>的根标签中使用这两个标签，就可以将路由在页面中显示出来了。

        router-link相当于a标签，to属性相当于href属性，用于配置路由中声明的路径，及对应的index.js中路由的path，匹配成功后则进行跳转切换。

        router-view则是将跳转后的内容展示出来。具体使用如下：

<template>
  <div id="app">
    <router-link to="/main">Main</router-link>
    <router-link to="/login">login</router-link>
    <router-link to="/register">register</router-link>
    <router-link to="/PdProduct">家电</router-link>
    <router-link to="/PhoneProduct">手机</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data () {
      return {
        
      }
    }
  }
</script>

<style>
  
</style>

测试：

        再项目目录的终端窗口（命令行）执行命令

npm run dev

        执行结果如下：

 二、路由的参数传递

        路由的传递分为三步：‘设参’、“传参”、‘“接参”

设参：通过路由表，设置路由参数，例如让商品pdproduct、phoneproduct分别携带参数id，则路由中声明方式如下：

 {
      path: '/PhoneProduct/:id', //跳转路径
      name: 'PhoneProduct',  //名称
      component: PhoneProduct  //组件
    },
    {
      path: '/PdProduct/:id', //跳转路径
      name: 'PdProduct',  //名称
      component: PdProduct  //组件
    }

传参：通过router-link 的to访问路径时携带参数

 <router-link to="/PdProduct/1">家电</router-link>
    <router-link to="/PhoneProduct/2">手机</router-link>

接参：在目标‘vue’中，通过vue中的$route.params.id(这里传递的属性是id)，如果传递的其他参数，则改变参数名字即可

<script>
  export default {
    name: 'app',
    data () {
      return {
        id:this.$route.params.id
      }
    }
  }
</script>

 测试结果：

三、实现跳转的两种方式： 

        实现路由的跳转的方式有两种：

1、通过html中的路由<router-link to='路由地址'>链接进行跳转

  <router-link to="/PdProduct/1">家电</router-link>
    <router-link to="/PhoneProduct/2">手机</router-link>

 2、通过js实现路由的跳转

<template>
  <div id="app">
    <button @click="btnfn">点我</button>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data () {
      return {
      }
    },
    methods:{
        btnfn:function () {
          this.$router.push("/PhoneProduct/2")
        }
    }
  }
</script>

<style>
 
</style>

四、路由安装过程中可能出现的问题：

        

Uncaught TypeError: Object(...) is not a function
    at eval (vue-router.esm-bundler.js?f2fc:2127:1)
    at Object../node_modules/vue-router/dist/vue-router.esm-bundler.js (app.js:2218:1)
    at __webpack_require__ (app.js:679:30)
    at fn (app.js:89:20)
    at eval (index.js?3672:1:1)
    at Object../src/router/index.js (app.js:2358:1)
    at __webpack_require__ (app.js:679:30)
    at fn (app.js:89:20)
    at eval (main.js?1c90:1:1)
    at Object../src/main.js (app.js:2350:1)

这种错误当我们运行（npm run dev）的时候不会报错，但是在浏览器的控制台中会报错。而这种错误的出现原因则是“vue-router”的版本过高。

解决方式：“降低vue-router的版本”

1、package.json中修改vue-router版本，然后再npm install下

2、或者在cmd输入

npm install vue-router@3.5.3

然后再次运行 npm run dev，则问题解决 

---

end~~