vue-router

最基础的路由配置步骤

1.创建路由器组件(JS)

创建两个组件构造器Home和About:

var Home = Vue.extend({
    template: '<div><h1>Home</h1><p>{{msg}}</p></div>',
    data: function() {
        return {
            msg: 'Hello, vue router!'
        }
    }
})
var About = Vue.extend({
    template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'
})

})

2.创建Router

调用构造器VueRouter,创建一个路由器实力router

var router = new VueRouter()

3.映射路由

调用router 的map方法映射路由,每条路由以key-value的形式存在,key是路径,value是组件。例如:‘/home’是一条路由的key,他表示路径;{component:Home}则表示该路由映射的组件。

router.map({
    '/home': { component: Home },
    '/about': { component: About }
})

4.使用v-link指令

<div class="list-group">
    <a class="list-group-item" v-link="{ path: '/home'}">Home</a>
    <a class="list-group-item" v-link="{ path: '/about'}">About</a>
</div>

在a元素上使用v-link指令跳转到指定路径。(官方文档推荐使用router-link)。

5.使用router-view标签

在页面上使用router-view标签,它用于渲染匹配的组件。

<router-view></router-view>

6.启动路由

路由器的运行需要一个根组件,router.start(‘App’,‘#app’)表示router 会创建一个App实例,并且挂载到#app元素。(使用vue-router 的应用,不需要显式地创建Vue实例,而是调用start方法将根组件挂载到某个元素上。)

var App = Vue.extend({})
router.start(App, '#app')

原文地址:vue-router 快速入门

### Vue Router 安装 为了使用 Vue Router,在项目中需先完成其安装。推荐的方式是利用 npm 或 yarn 来添加依赖: ```bash npm install vue-router # 或者 yarn add vue-router ``` 这一步骤确保了开发环境中有最新版本的 Vue Router 可供调用[^3]。 ### 配置 Vue Router 配置 Vue Router 主要涉及创建路由实例并将其挂载到 Vue 应用上。下面是一个简单的例子来展示如何设置基本的路由功能: ```javascript // 创建 routes.js 文件定义路径映射关系 import { createRouter, createWebHistory } from 'vue-router' import Home from './views/Home.vue' import About from './views/About.vue' const routes = [ { path: '/', name: 'Home', component: Home, }, { path: '/about', name: 'About', component: About, } ] const router = createRouter({ history: createWebHistory(), routes // 缩写为 `routes: routes` }) export default router; ``` 这段代码展示了如何导入必要的模块,定义页面组件对应的路径以及初始化路由器对象[^1]。 ### 使用 Vue Router 一旦完成了上述两步操作之后就可以在应用入口文件 main.js 中引入刚刚创建好的路由实例,并传给 Vue 实例: ```javascript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; createApp(App).use(router).mount('#app'); ``` 这样就成功集成了 Vue Router 到应用程序当中去了。 对于更复杂的场景比如嵌套路由、导航守卫等功能,则可以参阅官方文档获取更多指导。 ### 示例 这里给出一个完整的简单案例用于理解整个流程: #### 1. 安装 VueVue Router 假设已经有一个基于 Vue CLI 初始化的新工程,执行如下命令即可获得所需库支持: ```bash npm install vue@next vue-router@next ``` #### 2. 设置路由表 编辑 src/router/index.js 添加如下内容: ```javascript import { createRouter, createWebHashHistory } from "vue-router"; import HelloWorld from "../components/HelloWorld"; const routes = [{ path: "/", component: HelloWorld }]; const router = createRouter({ history: createWebHashHistory(), routes, }); export default router; ``` #### 3. 修改主程序启动逻辑 最后调整 src/main.js 如下所示: ```javascript import { createApp } from "vue"; import App from "./App.vue"; import router from "./router"; createApp(App).use(router).mount("#app"); ``` 以上就是关于 Vue Router 的快速入门指南,涵盖了从零开始构建带有路由功能的应用所需的全部知识点。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值