【vue学习笔记-vue-router的使用】-2023.8.28

目录

简介

使用示例如下：

1.在components下创建组件（以内容页为例）：

2.设置路由

3.在App.vue文件中构建界面

4.效果如下

---

简介

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：

• 嵌套路由映射
• 动态路由选择
• 模块化、基于组件的路由配置
• 路由参数、查询、通配符
• 展示由 Vue.js 的过渡系统提供的过渡效果
• 细致的导航控制
• 自动激活 CSS 类的链接
• HTML5 history 模式或 hash 模式
• 可定制的滚动行为
• URL 的正确编码

使用示例如下：

1.在components下创建组件（以内容页为例）：

<template>
 <div>
    <h1>这是内容页</h1>
 </div>
</template>

<script>
 export default {
    name: 'Content',
   data () {
     return {

     }
   },
   components: {

   }
 }
</script>

2.设置路由

首先要导入vue-router，然后引入内容页和主页。具体代码如下：

import { compare } from 'semver';
import Vue from 'vue'
import VueRouter from 'vue-router'

import Content from '@/components/Content'
import Main from '@/components/Main'

Vue.use(VueRouter);

export default new VueRouter({
    routes: [
        {
            path: '/main',
            name: 'main',
            component: Main
        },
        {
            path: '/content',
            name: 'content',
            component: Content
        }
    ]
})

3.在App.vue文件中构建界面

<template>
  <div id="app">
    <router-link to="/content">内容页</router-link>
    <router-link to="/main">首页</router-link>
    <router-view></router-view>
  </div>
</template>

import Content from '@/components/Content'

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

to的参数就是要跳转的界面，与第二步中的“path”对应。不能忘记router-view的使用，否则可能不会显示内容。

4.效果如下