小丑西瓜9

这个屌丝很懒，什么也没留下！

热门标签

vue的路由Route安装和使用_vue 按照route

作者：小丑西瓜9 | 2024-02-19 07:00:25

踩

vue 按照route

路由

在vue中，route,即为前端路由。下面是专业名词解释：

在这里插入图片描述

前端渲染和后端渲染

在这里插入图片描述

在这里插入图片描述
在使用route之前，我们需要知道一些基础知识：

改变url不刷新页面:

使用hash值来进行变化route。

location.hash("路径")
1

通过html对象修改url：

history.pushState(data,title,url)
1

在该基础上，把urlpush进堆栈。然后使用back方法，弹出栈

history.back()
1

上面是用push方法，就是一直压栈和出栈，下面是用replace来进行代替当前站点，就不是栈方法：

history.replaceState(data,title,url)
1

使用go来进行前后移动：

history.go(-2)
1

或者向前:

history.go(2)
1

history.forward()
1

vue-route的使用

在这里插入图片描述

npm install vue-route --save
1

安装成功后，有在src下有route文件夹：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
//先使用 vue的uuse来使用vueroute
Vue.use(VueRouter)
//定义route路由
  const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]
//history模式就是我们学的history的go，reward。pushState。replaceState啊等。
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
//导出route组件
export default router

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

创建组件

在compoments文件夹下面创建about.vue:

<template>
  <div>
      <h2>
          我是about页面...
      </h2>
  </div>
</template>
<script>
</script>
<style scoped>
</style>
1
2
3
4
5
6
7
8
9
10
11

编写App.vue。创建两个标签，点击哪个，显示哪个页面，运行如下:

$C:\Users\xiaoc\Desktop\一些杂文件\a3.gif$

第一个页面加载[使用重定向方法]:

  {
      path: '/',
      name:'first',
      redirect: '/pagehome'
    },
1
2
3
4
5

效果：

在这里插入图片描述

使用history模式来避免url地址中出现#，在route目录下的index.js中定义：

const router = new VueRouter({
    //history模式
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
1
2
3
4
5
6

route的tag属性

将route-link标签变成button：

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/pageHome" tag="button">Home</router-link> |
      <router-link to="/about" tag="button">About</router-link>
      <!-- <button>显示主页</button>
      <button>显示about页面</button> -->
    </div>
    <router-view/>
  </div>
</template>
<style>
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

效果:

在这里插入图片描述

点击route，对应按钮变红色：

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/pageHome" tag="button" active-class="changecolor">Home</router-link> |
      <router-link to="/about" tag="button" active-class="changecolor">About</router-link>
      <!-- <button>显示主页</button>
      <button>显示about页面</button> -->
    </div>
    <router-view/>

  </div>
</template>

<style>
  .changecolor{
    color:red;
  }

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

效果如下：

在这里插入图片描述

或者直接在route下面的index.js写：

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
  activeClass: 'changecolor'
})
1
2
3
4
5
6

使用按钮替换route-link:

<template>
  <div id="app">
    <div id="nav">
      <!-- <router-link to="/pageHome" tag="button" active-class="changecolor">Home</router-link> |
      <router-link to="/about" tag="button" active-class="changecolor">About</router-link> -->
      <!-- <button>显示主页</button>
      <button>显示about页面</button> -->
      使用按钮来变化route
      <button @click="gohome">首页</button>
      <button @click="goabout">about</button>
    </div>
    <router-view/>

  </div>
</template>
<script>
export default {
    name: 'App'
    ,data:{

    }
    ,methods:{
        gohome(){
            this.$router.push("/pagehome");
        }
        ,goabout(){
            this.$router.push("/about");
        }
    }

}
</script>
<style>
  .changecolor{
    color:red;
  }

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

也就是说，使用写代码的方法，来变换组件视图,效果如下：

在这里插入图片描述

动态路由的使用

什么是动态路由？假设我几个用户进入的页面参数是不一样的，那么此情况就是动态路由：

App.vue代码：

<template>
  <div id="app">
    <div id="nav">
      <!-- <router-link to="/pageHome" tag="button" active-class="changecolor">Home</router-link> |
      <router-link to="/about" tag="button" active-class="changecolor">About</router-link> -->
      <!-- <button>显示主页</button>
      <button>显示about页面</button> -->
      使用按钮来变化route
      <!-- <button @click="gohome">首页</button>
      <button @click="goabout">about</button> -->
      <router-link to="/pagehome">首页</router-link> 
      <router-link to="/about">关于</router-link> 
      <router-link :to="'/user/'+userid">用户界面</router-link> 
      <!-- <router-link>新组件</router-link>  -->
    </div>
    <router-view/>

  </div>
</template>
<script>
export default {
    name: 'App'
    ,data(){
      return {
        userid: 'zhangsan1'
      }
    }
}
</script>
<style>
  .changecolor{
    color:red;
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

test.vue代码如下：

<template>
    <div>
        欢迎，这里是用户个人页面
        ,你好 : {{$route.params.userId}}
    </div>
</template>

<script>
    export default {        
        name: 'user'

    }
</script>

<style scoped>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

目录一览：

在这里插入图片描述

从保存的cookie得知，账户为zhangsan,那么url显示张三:

在这里插入图片描述

认识路由的懒加载

所谓懒加载，就是用到时再加载、

在这里插入图片描述

使用例子：

  // {
  //   path: '/about',
  //   name: 'About',
  //   // route level code-splitting
  //   // this generates a separate chunk (about.[hash].js) for this route
  //   // which is lazy-loaded when the route is visited.
  //   路由懒加载
  //   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  // }
1
2
3
4
5
6
7
8
9

完整使用：

import Vue from 'vue'
import VueRouter from 'vue-router'

// import Home from '../components/HelloWorld.vue'
// import about from '../components/about.vue'
// import user from '../components/test.vue'
//先使用 vue的uuse来使用vueroute
Vue.use(VueRouter)
//定义route路由
  const routes = [
    {
      path: '/',
      name:'first',
      redirect: '/pagehome'
    },
  {
    path: '/pagehome',
    name: '首页',
    component: () => import('../components/HelloWorld.vue')
  },
  // {
  //   path: '/about',
  //   name: 'About',
  //   // route level code-splitting
  //   // this generates a separate chunk (about.[hash].js) for this route
  //   // which is lazy-loaded when the route is visited.
  //   路由懒加载
  //   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  // }
  {
    path: '/about',
    name: '关于',
    component: () => import('../components/about.vue')

  },
  {
    path: '/user/:userId',
    component: () => import('../components/test.vue')
  }
]
//history模式就是我们学的history的go，reward。pushState。replaceState啊等。
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
  activeClass: 'changecolor'
})
//导出route组件
export default router

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

构建后，结果：

在这里插入图片描述

认识嵌套路由

在这里插入图片描述

使用：

创建子组件test2.vue,导出为

<template >
    <div>
      <h1>嵌套路由的使用。。。我是about的子组件</h1>
      <ul>
        <li >A</li>
        <li >B</li>
        <li >C</li>
        <li >D</li>
      </ul>
    </div>  
</template>
<script>
export default {
  name: 'aboutSub',
}
</script>
<style  scoped>
        
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

路由定义

import Vue from 'vue'
import VueRouter from 'vue-router'
// import Home from '../components/HelloWorld.vue'
// import about from '../components/about.vue'
// import user from '../components/test.vue'
//先使用 vue的uuse来使用vueroute
Vue.use(VueRouter)
//定义route路由
  const routes = [
    {
      path: '/',
      name:'first',
      redirect: '/pagehome'
    },
  {
    path: '/pagehome',
    name: '首页',
    component: () => import('../components/HelloWorld.vue')
  },
  // {
  //   path: '/about',
  //   name: 'About',
  //   // route level code-splitting
  //   // this generates a separate chunk (about.[hash].js) for this route
  //   // which is lazy-loaded when the route is visited.
  //   路由懒加载
  //   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  // }
  {
    path: '/about',
    name: '关于',
    component: () => import('../components/about.vue'),
    children:[
      {
        path: 'aboutSub',
        component: () => import ('../components/test2.vue')
      }
    ]

  },
  {
    path: '/user/:userId',
    component: () => import('../components/test.vue')
  }
]
//history模式就是我们学的history的go，reward。pushState。replaceState啊等。
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
  activeClass: 'changecolor'
})
//导出route组件
export default router

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

在about组件中使用子组件

<template>
  <div class="about">
      <h2>
          我是about页面...，我将使用子组件
      </h2>
      <router-link to="/about/aboutSub">显示路由嵌套的子组件</router-link>
      <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'about',
  props: {
    msg: String
  }
}
</script>
<style scoped>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在app.vue中定义路由about

<template>
  <div id="app">
    <div id="nav">
      <!-- <router-link to="/pageHome" tag="button" active-class="changecolor">Home</router-link> |
      <router-link to="/about" tag="button" active-class="changecolor">About</router-link> -->
      <!-- <button>显示主页</button>
      <button>显示about页面</button> -->
      使用按钮来变化route
      <!-- <button @click="gohome">首页</button>
      <button @click="goabout">about</button> -->
      <!-- <router-link to="/pagehome">首页</router-link>  -->
      <router-link to="/about">关于</router-link> 
      <!-- <router-link :to="'/user/'+userid">用户界面</router-link>  -->
      <!-- <router-link>新组件</router-link>  -->
    </div>
    <router-view/>

  </div>
</template>
<script>
export default {
    name: 'App'
    ,data(){
      return {
        userid: 'zhangsan1'
      }
    }
}
</script>
<style>
  .changecolor{
    color:red;
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

运行结果

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/113249