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文件,便于查看路由跳转效果。

vue-router 使用详情_第1张图片

 

 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 

 

 vue-router 使用详情_第2张图片

 

vue-router 使用详情_第3张图片

 

 

 

vue-router 使用详情_第4张图片

 

你可能感兴趣的:(vue-router 使用详情)