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

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 
 6 
 7 
12 
13 

 

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

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

 1 
10 
21 

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

 1 
18 

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

 1 
 7 
21