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

发现宝藏

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

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组件。

<!-- MyNewPage.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()
    }
  }
]