vue-router 使用详情

ps: 以下是vue-router的基本使用，从引入路由依赖开始，大佬绕路，小白可以瞧一瞧，不对的地方多多指教。

在vue项目中如何使用vue-router？

// 可以先跳过下面两个ps内容

ps 1：路由中几个容易混淆的字段：router,routes,route。

router：路由对象，经常用this.$router.push()进行路由跳转。

routes：是一个数组，里面是配置的路由，[{path："/",component：home}]。

route：当前激活的路由的信息，this.$route里面有我们传入的query、params参数。

ps 2：路由有两个标签<router-link>  <router-view>，<router-link> 是用来路由跳转的，默认会被浏览器解析为a链接，可以使用tag属性自定义，如<router-link tag="div"></router-link>则会解析成div元素 ，<router-view>是用来渲染当前路由的组件内容。

1. 安装vue-router依赖

npm install vue-router --save

2. 在main.js文件中引入路由依赖

import Vue from "vue"
import Router from "vue-router"
Vue.use(Router)

3. 创建router.js文件，配置路由

ps：我在我的项目里创建了一些vue文件，便于查看路由跳转效果。

 

import Router from "vue-router"
import index from "./views/index";
import main from "./views/main/main";
import showOne from "./views/showOne";
import showTwo from "./views/showTwo";
const router = new Router({
   routes: [
        {
            path:"/",
            component:index
        },
        {    
            path:"/main",
            component:main,
            children:[
                {
                   path:"/showOne", // path前面加了/，那么跳到这个页面时候地址前面不用再加/main，即：ip:端口/#/showOne即可
                   name:"one",
                   component:showOne
                },
                {
                   path:"showTwo/:id", // path前面没有/，那么访问这个页面时地址前面要加/main，而且一定要有id参数，即：ip:端口/#/main/showTwo/id
                   name:"two",
                   component:showTwo
                }
            ]
        },
    ]
    
})    
    

4. 修改main.js文件，引入router.js文件

import Vue from "vue"
import Router from "vue-router"
Vue.use(Router)
import router from "./router.js" // 路由配置文件
import App from "./App.vue"

new Vue({
　　render:h=>h(App),
　　router // 相当于 router:router
}).$mouse("#app")

5. App.vue文件

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

<style>
</style>

 

下面是几个比较重要的文件内容：

1. main.vue,即整体框架页面

<template>
  <div class="main">
    <top></top>
    <left></left>
    <div class="container">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import top from "./top";
import left from "./left";
export default {
  name: "mainBox",
  components: {
    top,
    left
  }
};
</script>
<style  scoped>31 </style>

2. left.vue，即框架左侧菜单区域

<template>
  <div class="left">
    <div class="tip">我是left左侧</div>
    <ul>
      <li>router-link的跳转方式：</li>
      <li>
        <router-link tag="div" to="/showOne">页面1</router-link> // tag可以改变router-link被浏览器解析的dom，默认是a链接
      </li>
      <li>
        <router-link to="/main/showTwo/123">页面2</router-link>
      </li>
      <li>$router.push跳转方式</li>
      <li @click="linkOne">页面1</li>
      <li @click="linkTwo">页面2</li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "top",
  methods: {
    linkOne() {
　　　　// 可以通过name属性跳转，也可以通过path

      // this.$router.push({
      //   name: "one",
      // });
      this.$router.push({
        path: "/showOne"
      });
    },
    linkTwo() {
　　　　// params参数会在url上展示，还可以传query参数
      this.$router.push({
        name: "two",
        params: {
          id: "xxx"
        },
　　　　　query:{
　　　　　　
　　　　　}
      });
    }
  }
};
</script>

3. showTwo.vue文件，框架中页面2 菜单对应的页面，获得路由上的参数，this.$route里面有详细内容

<template>
  <div class="show-two">
    <div class="tip">我是页面2</div>
    <div>路由的id参数为：{{paramsId}}</div>
  </div>
</template>
<script>
export default {
  name: "showTwo",
  data() {
    return {
      paramsId: ""
    };
  },
  created() {
    this.paramsId = this.$route.params.id;
    console.log(this.$route);// 输出路由看看
  }
};
</script>
<style scoped>
</style>