vue-router 使用详情

ps: 以下是vue-router的基本使用，从0开始搭起，大佬绕路，小白可以瞧一瞧。

在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依赖

1 npm install vue-router --save

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

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

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

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

 1 import Router from "vue-router"
 2 import index from "./views/index";
 3 import main from "./views/main/main";
 4 import showOne from "./views/showOne";
 5 import showTwo from "./views/showTwo";
 6 const router = new Router({
 7    routes: [
 8         {
 9             path:"/",
10             component:index
11         },
12         {    
13             path:"/main",
14             component:main,
15             children:[
16                 {
17                    path:"/showOne", // path前面加了/，那么跳到这个页面时候地址前面不用再加/main，即：ip:端口/#/showOne即可
18                    name:"one",
19                    component:showOne
20                 },
21                 {
22                    path:"showTwo/:id", // path前面没有/，那么访问这个页面时地址前面要加/main，而且一定要有id参数，即：ip:端口/#/main/showTwo/id
23                    name:"two",
24                    component:showTwo
25                 }
26             ]
27         },
28     ]
29     
30 })    
31

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

 1 import Vue from "vue"
 2 import Router from "vue-router"
 3 Vue.use(Router)
 4 import router from "./router.js" // 路由配置文件
 5 import App from "./App.vue"
 6 
 7 new Vue({
 8 　　render:h=>h(App),
 9 　　router // 相当于 router:router
10 }).$mouse("#app")

5. App.vue文件

 1 <template>
 2   <div id="app">
 3     <router-view></router-view>
 4   </div>
 5 </template>
 6 
 7 <script>
 8 export default {
 9   name: "App"
10 };
11 </script>
12 
13 <style>
14 </style>

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

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

 1 <template>
 2   <div class="main">
 3     <top></top>
 4     <left></left>
 5     <div class="container">
 6       <router-view></router-view>
 7     </div>
 8   </div>
 9 </template>
10 <script>
11 import top from "./top";
12 import left from "./left";
13 export default {
14   name: "mainBox",
15   components: {
16     top,
17     left
18   }
19 };
20 </script>
21 <style  scoped>31 </style>

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

 1 <template>
 2   <div class="left">
 3     <div class="tip">我是left左侧</div>
 4     <ul>
 5       <li>router-link的跳转方式：</li>
 6       <li>
 7         <router-link tag="div" to="/showOne">页面1</router-link> // tag可以改变router-link被浏览器解析的dom，默认是a链接
 8       </li>
 9       <li>
10         <router-link to="/main/showTwo/123">页面2</router-link>
11       </li>
12       <li>$router.push跳转方式</li>
13       <li @click="linkOne">页面1</li>
14       <li @click="linkTwo">页面2</li>
15     </ul>
16   </div>
17 </template>
18 <script>
19 export default {
20   name: "top",
21   methods: {
22     linkOne() {
23 　　　　// 可以通过name属性跳转，也可以通过path
24 
25       // this.$router.push({
26       //   name: "one",
27       // });
28       this.$router.push({
29         path: "/showOne"
30       });
31     },
32     linkTwo() {
33 　　　　// params参数会在url上展示，还可以传query参数
34       this.$router.push({
35         name: "two",
36         params: {
37           id: "xxx"
38         },
39 　　　　　query:{
40 　　　　　　
41 　　　　　}
42       });
43     }
44   }
45 };
46 </script>

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

 1 <template>
 2   <div class="show-two">
 3     <div class="tip">我是页面2</div>
 4     <div>路由的id参数为：{{paramsId}}</div>
 5   </div>
 6 </template>
 7 <script>
 8 export default {
 9   name: "showTwo",
10   data() {
11     return {
12       paramsId: ""
13     };
14   },
15   created() {
16     this.paramsId = this.$route.params.id;
17     console.log(this.$route);// 输出路由看看
18   }
19 };
20 </script>
21 <style scoped>
22 </style>