Vue如何创建一个新页面以及相关路由配置详解

迷南。 2024-02-05 23:16 8阅读 0赞

#### 文章目录 ####

*  发现宝藏
 *  1.路由配置语法格式
 *  2.vue如何创建一个新页面
 *   *  1.创建Vue组件
     *  2.设计页面结构
     *  3.配置Vue Router
     *  4.更新导航菜单
     *  5.测试导航
 *  3.vue路由配置常见属性
 *   *  1. path
     *  2. name
     *  3. component
     *  4. meta
     *  5. query
     *  6. params
     *  7. redirect
     *  8. alias
     *  9. beforeEnter

## 发现宝藏 ##

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。【[宝藏入口][Link 1]】。

## 1.路由配置语法格式 ##

在Vue.js中，路由配置是通过使用Vue Router来完成的。以下是Vue路由配置的基本语法格式：

javascript
    import Vue from 'vue';
    import VueRouter from 'vue-router';
    import Home from '@/views/Home.vue'; // 导入视图组件
    
    Vue.use(VueRouter);
    
    const routes = [
      {
        
        path: '/', // 路由路径
        name: 'Home', // 路由名称
        component: Home, // 对应的视图组件
      },
      // 其他路由配置...
    ];
    
    const router = new VueRouter({
        
      routes, // 使用上面定义的路由配置
    });
    
    export default router;

在上面的代码中，有几个重要的属性和概念：

path: 路由的路径，表示在浏览器地址栏中输入的路径。
    name: 路由的名称，用于在代码中标识和调用路由。
    component: 路由对应的视图组件，即在访问该路由时要显示的内容。

这些路由配置会被传递给`VueRouter`实例，并在Vue应用中使用。在主文件（通常是`main.js`）中，你需要导入并使用这个VueRouter实例：

javascript
    import Vue from 'vue';
    import App from './App.vue';
    import router from './router'; // 导入路由配置
    
    Vue.config.productionTip = false;
    
    new Vue({
        
      render: (h) => h(App),
      router, // 使用路由
    }).$mount('#app');

在视图组件中，你可以使用`<router-link>`组件来生成链接，或者通过`$router`对象进行编程式导航。例如：

<router-link to="/">Home</router>

## 2.vue如何创建一个新页面 ##

在Vue.js项目中添加新页面是一个常见的任务，特别是随着项目的不断发展。在本篇博客中，我们将详细介绍如何添加一个新的Vue页面，包括创建Vue组件、配置Vue Router以及在应用中进行导航。

### 1.创建Vue组件 ###

首先，在你的Vue.js项目中创建一个新的Vue组件。你可以使用Vue CLI工具，执行以下命令：

vue generate MyNewPage

这将在 `src/views` 目录下创建一个名为 `MyNewPage.vue` 的新组件。

### 2.设计页面结构 ###

打开新创建的Vue组件文件 `MyNewPage.vue`，设计页面的结构和内容。你可以使用Vue的模板语法，添加HTML元素、样式和其他Vue组件。

<template>
      <div>
        <h1>New Page</h1>
        <p>This is a new page content.</p>
      </div>
    </template>
    
    <script>
    export default {
        
      name: 'MyNewPage',
    };
    </script>
    
    <style scoped>
    /* 添加页面样式 */
    </style>

### 3.配置Vue Router ###

在项目中使用Vue Router来管理页面导航。打开 `src/router/index.js` 文件，添加新页面的路由配置：

// src/router/index.js
    import Vue from 'vue';
    import VueRouter from 'vue-router';
    import MyNewPage from '@/views/MyNewPage.vue';
    
    Vue.use(VueRouter);
    
    const routes = [
      // 其他路由配置...
    
      {
        
        path: '/new-page',
        name: 'MyNewPage',
        component: MyNewPage,
      },
    ];
    
    const router = new VueRouter({
        
      routes,
    });
    
    export default router;

确保将新页面的组件导入并在路由配置中进行注册。

### 4.更新导航菜单 ###

如果你的应用有导航菜单，确保更新导航菜单以包含新页面的链接。你可以使用`<router-link>;`组件或直接使用`<a>;`标签。

<router-link to="/new-page">New Page</router-link>

### 5.测试导航 ###

现在你可以在应用中测试导航到新页面。启动你的Vue.js应用：

npm run serve

然后在浏览器中访问 `http://localhost:8080/new-page`，确保能够正确显示新页面内容。  
通过按照以上步骤，你成功地添加了一个新的Vue页面到你的项目中。这个过程包括创建Vue组件、配置Vue Router以及更新导航菜单。希望这个超详细的步骤能够帮助你轻松扩展和维护你的Vue.js应用。

## 3.vue路由配置常见属性 ##

Vue Router 是 Vue.js 官方推荐的路由管理器，它允许我们为单页应用定义路由和子路由，控制页面的切换。在 Vue Router 中，我们可以通过配置路由来指定路径、组件、查询参数等属性。下面将详细介绍 Vue Router 中路由配置的各种属性并给出相应的示例代码。

### 1. path ###

`path` 是路由的路径，它是路由配置中最基础的属性。当用户访问的 URL 与路由的 `path` 属性匹配时，对应的组件将被渲染。

const Foo = {
         template: '<div>foo</div>' }
    const Bar = {
         template: '<div>bar</div>' }
    const routes = [
      {
         path: '/foo', component: Foo },
      {
         path: '/bar', component: Bar }
    ]
    new VueRouter({
        
      routes // （缩写）相当于 routes: routes
    })

### 2. name ###

`name` 是路由的名称，它用于在路由传参和嵌套路由时进行标识。当我们使用 `<router-view>` 时，可以通过 `name` 属性来显示对应的组件。

const routes = [
      {
         path: '/foo', component: Foo, name: 'foo' },
      {
         path: '/bar', component: Bar, name: 'bar' }
    ]
    // 在组件中使用 router-view 指定名称
    <router-view name="foo"></router-view>
    <router-view name="bar"></router-view>

### 3. component ###

`component` 是路由对应的组件，当用户访问该路由时，会渲染此组件。我们可以直接绑定组件，也可以通过动态 `import` 来异步加载组件。

const Foo = {
         template: '<div>foo</div>' }
    const Bar = {
         template: '<div>bar</div>' }
    const routes = [
      {
         path: '/foo', component: Foo },
      {
         path: '/bar', component: Bar }
    ]
    // 或者使用动态 import
    const routes = [
      {
         path: '/foo', component: () => import('./Foo.vue') },
      {
         path: '/bar', component: () => import('./Bar.vue') }
    ]

### 4. meta ###

`meta` 是路由的元数据信息，它可以用于设置路由的元数据，如权限验证等。

const routes = [
      {
         
        path: '/foo', 
        component: Foo, 
        meta: {
         requiresAuth: true } // 表示该路由需要认证
      },
      {
         
        path: '/bar', 
        component: Bar, 
        meta: {
         requiresAuth: false } // 表示该路由不需要认证
      }
    ]

在Vue Router中，`meta`属性确实可以用来存储多种类型的元数据，这些元数据可以用于各种目的，包括但不限于页面标题、角色权限、页面缓存策略、图标等。这些属性通常用于以下场景：

1.  **title** \- 页面标题，用于设置浏览器标签页的标题。
2.  **roles** \- 角色数组，用于定义哪些角色可以访问该路由。这在角色基础的访问控制系统中非常有用。
3.  **noCache** \- 布尔值，用于指示是否缓存该路由对应的页面。如果设置为`true`，则每次访问该路由时都会重新获取页面，而不是使用缓存版本。
4.  **icon** \- 图标 URL 或名称，用于在导航菜单或页面的图标标签中显示。  
    这些属性在路由定义中并不是必须的，它们的存在取决于应用程序的具体需求。例如，如果你的应用程序需要根据用户的角色来限制对某些路由的访问，那么`roles`属性就会非常有用。同样，如果你不想缓存某些动态生成的页面，`noCache`属性就会很有帮助。  
    下面是一个包含这些属性的示例代码：

const routes = [
      {
        
        path: '/subjects',
        component: SubjectsComponent,
        meta: {
        
          title: '学科',
          roles: ['ADMIN'], // 只有管理员角色可以访问
          noCache: true, // 不缓存该页面
          icon: 'list' // 使用 'list' 图标
        }
      }
    ]

在这个例子中，`/subjects`路由对应的页面标题会被设置为“学科”，只有管理员角色可以访问这个路由，页面不会被缓存，并且在导航菜单中会显示为列表图标。

需要注意的是，这些属性并不会直接影响路由的匹配过程，它们主要用于应用程序的其他部分，如访问控制、页面标题设置、缓存策略等。因此，它们通常不会被详细介绍在路由配置的基本教程中，但它们对于构建复杂的应用程序是非常有用的。

### 5. query ###

`query` 是路由的查询参数，它允许我们在 URL 中传递参数。

const routes = [
      {
         
        path: '/search', 
        component: SearchComponent,
        query: {
         
          // 可以定义默认值
          query: {
         type: '电影' } 
        }
      }
    ]
    // 访问 /search?query=电影时，SearchComponent 将被渲染

### 6. params ###

`params` 是路由的参数，它允许我们在路由路径中传递动态片段。

const routes = [
      {
         
        path: '/user/:id', 
        component: UserProfile,
        params: {
         
          // 可以定义默认值
          id: {
         type: Number, required: true } 
        }
      }
    ]
    // 访问 /user/123 时，UserProfile 将被渲染，并将 123 作为参数传递给组件

### 7. redirect ###

`redirect` 属性用于设置路由的重定向。

const routes = [
      {
         
        path: '/old', 
        redirect: '/new' // 将访问 /old 的用户重定向到 /new
      },
      {
         
        path: '/new', 
        component: NewComponent
      }
    ]

### 8. alias ###

`alias` 属性用于设置路由的别名。

const routes = [
      {
         
        path: '/foo', 
        component: Foo,
        alias: '/f' // '/f' 也是访问 /foo 的另一种方式
      }
    ]

### 9. beforeEnter ###

`beforeEnter` 属性用于设置进入路由前的钩子函数。

const routes = [
      {
         
        path: '/foo', 
        component: Foo,
        beforeEnter: (to, from, next) => {
        
          // 可以在这里进行路由验证等操作
          next()
        }
      }
    ]

[Link 1]: https://www.captainbed.cn/dl