Vue路由-Router搭建以及简单使用

一、VueRouter介绍

1.所谓的路由就是根据用户不同的访问地址，应用程序给与不同的响应，VueRouter就是官方的路由管理器。

二、配置路由（如果在创建项目的时候没有选择vue-router 就需要手动配置vue-router）

1.在项目文件夹终端输入npm install vue-router 进行加载router，选择版本的话npm install vue-router@3安装版本为3最新的包

2.在src文件夹下新建router文件夹，在该文件夹下边新建index.js文件

3.配置index.js文件，首先导入vue以及vuerouter，然后倒入已经定义好的路由实例，

输入Vue.use(VueRouter)使用router，接着定义路由（定义每个路由实例的name（可有可无），path,component）,最后将router接口暴露出去（export defaut router）；这个页面就配置好了

import Vue from 'vue';
import VueRouter from 'vue-router';
import Mylist from '../views/Mylist.vue';
Vue.use(VueRouter)
const routes = [
  {
    path:'/list',
    component:Mylist
  }

]

const router = new VueRouter({
  routes
})

export default router

4.在main.js文件配置路由，在这个页面如果我们创建的时候没有点击路由需要import router from'./router'导入路由，然后再new Vue中添加router就配置好了

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

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

三、使用路由对页面进行渲染

1.通过router-view使用路由（在App.vue进行使用），在页面内容部分输入<router-view></router-view>标签使用路由，默认匹配路由配置中路径为'/'的

<template>
  <div id="app">
    <main>
      
       <router-view></router-view>
    </main>
  
  </div>
</template>
<script>
  import Myheader from "./views/Myheader.vue";
  export default{
    components:{
    MyheaderVue: Myheader
   
}
  }
</script>

<style lang="scss">

</style>

2.简单的路由跳转（router-link）

通过router-link进行简单的路由跳转，通过router-link标签绑定to属性（to属性绑定的是路由的path），点击就会跳转到指定path的路由上了

<template>
  <div id="app">
   
    <header>
       <MyheaderVue></MyheaderVue>
       <router-link to="/list"> 跳转到第一个界面</router-link>
       <router-link to="/">首页</router-link>
    </header>
    <main>
      
       <router-view></router-view>
    </main>
  
  </div>
</template>
<script>
  import Myheader from "./views/Myheader.vue";
  export default{
    components:{
    MyheaderVue: Myheader
   
}
  }
</script>

<style lang="scss">

</style>

下篇文章深入vue-router的使用