<think>我们使用
VueRouter来创建一个基于hash模式的
路由。
VueRouter是
Vue.js官方的
路由管理器，它和
Vue.js深度集成，用于构建单页面应用。在hash模式下，URL中会有一个`#`符号，例如：`http://example.com/#/home`。这种模式下的
路由变化不会向服务器重新请求页面，而是通过监听`hashchange`事件来实现页面内容的更新。步骤：1.安装
VueRouter（如果尚未安装）2.引入
Vue和
VueRouter，并告诉
Vue使用
VueRouter插件。3.定义
路由组件（可以是要渲染的.
vue组件，也可以是简单的JavaScript对象）。4.创建
路由实例，并传入
路由配置（routes数组），同时指定模式为hash（实际上，hash模式是
默认的，所以可以不指定，但为了清晰也可以显式指定）。5.将
路由实例挂载到
Vue实例上。下面是一个简单的示例，展示如何创建一个包含两个页面的hash
路由：首页（Home）和关于（About）。假设我们有两个组件：Home和About。注意：在实际项目中，我们通常会使用单文件组件（.
vue文件），但为了示例的简洁性，这里使用JavaScript对象来定义组件。</think>###
Vue Router 创建 Hash
路由
在
Vue.js 中，使用
Vue Router 创建 hash
路由非常简单。Hash
路由是
默认模式，URL 格式为 `http://example.com/#/path`。以下是详细实现：
#### 完整代码示例
```javascript
// main.js
import
Vue from '
vue'
import
VueRouter from '
vue-router'
import App from './App.
vue'
// 1. 注册
VueRouter 插件
Vue.use(
VueRouter)
// 2. 定义
路由组件
const Home = { template: '<div>Home Page</div>' }
const About = { template: '<div>About Page</div>' }
const User = {
template: '<div>User ID: {{ $route.params.id }}</div>'
}
// 3. 创建
路由配置
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
{
path: '/user/:id',
component: User,
props: true // 启用 props 传参
}
]
// 4. 创建
路由器实例（
默认使用 hash 模式）
const
router = new
VueRouter({
routes // routes: routes 的简写
})
// 5. 挂载到
Vue 实例
new
Vue({
router, // 注入
路由
render: h => h(App)
}).$mount('#app')
```
```
vue
<!
-- App.
vue -->
<template>
<div id="app">
<!
-- 路由导航链接
-->
<
router-link to="/">Home</
router-link> |
<
router-link to="/about">About</
router-link> |
<
router-link to="/user/123">User 123</
router-link>
<!
-- 路由视图容器
-->
<
router-view></
router-view>
</div>
</template>
```
#### 代码解析：
1. **注册插件**
`
Vue.use(
VueRouter)` 启用
路由功能
2. **
路由配置**
```javascript
const routes = [
{ path: '/', component: Home }, // 基础
路由
{ path: '/about', component: About }, // 静态路径
{ path: '/user/:id', component: User } // 动态
路由参数
]
```
3. **
路由器实例**
```javascript
const
router = new
VueRouter({ routes })
```
默认使用 hash 模式（无需额外配置）
4. **
路由导航**
```
vue
<
router-link to="/path">导航链接</
router-link>
```
5. **视图渲染**
```
vue
<
router-view></
router-view>
```
路由匹配的组件将在此渲染
#### 关键特性说明：
- **Hash 模式特点**：
URL 使用 `#` 作为分隔符（如 `http://site.com/#/about`），不会触发页面刷新，兼容性好
- **动态
路由**：
使用 `:id` 语法捕获参数，通过 `$route.params.id` 或 props 访问
- **导航守卫**（可选）：
可添加全局/
路由级守卫控制导航
```javascript
router.beforeEach((to, from, next) => {
console.log(`Navigating to ${to.path}`)
next() // 必须调用
})
```
#### 运行效果：
1. 访问 `http://localhost:8080/#/` 显示 Home 组件
2. 点击 "About" 链接，URL 变为 `http://localhost:8080/#/about`，显示 About 组件
3. 点击 "User 123"，URL 包含参数 `http://localhost:8080/#/user/123`，显示用户ID
---
本文介绍如何在Vue项目中设置默认路由，通过使用redirect属性来实现页面加载时的默认跳转。此方法适用于从Vue 1.0升级到2.x版本时遇到的相关问题。
扫一扫
2628
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
