Training Example: Vue Router – Review the Data, Give Your Score & Compare to the Real AI Evaluation

Skip to content
[H1] Vue RouterThe official Router for Vue.js
Expressive, configurable and convenient routing for Vue.jsGet StartedRuleKitFree Video CourseGet the Vue Router Cheat Sheet
[IMG: Vue Router]
[H2] ? Expressive route syntax
Define static and dynamic routes with an intuitive and powerful syntax.
[H2] ? Fine-grained Navigation control
Intercept any navigation and precisely control its outcome.
[H2] ? Component-based configuration
Map each route to the component that should display.
[H2] ? History modes
Choose between HTML5, Hash or Memory history modes.
[H2] ? Scroll control
Precisely control the scroll position in every page.
[H2] ? Automatic Encoding
Directly use unicode characters (你好) in your code.Are you an LLM? View /llms.txt for optimized Markdown documentation, or /llms-full.txt for full documentation bundle
[H3] Gold Sponsors
[IMG: CodeRabbit]
[H3] Silver Sponsors
[IMG: VueMastery]
[IMG: Controla]
[IMG: SendCloud]
Become a Sponsor!

Skip to content
[H1] Vue RouterVue.js 的官方路由
为 Vue.js 提供富有表现力、可配置的、方便的路由入门 →RuleKit免费视频课程Get the Vue Router Cheat Sheet
[IMG: Vue Router]
[H2] ? 富有表现力的路由语法
用直观且强大的语法来定义静态或动态路由。
[H2] ? 细致的导航控制
可拦截任何导航并更精确地控制其结果。
[H2] ? 基于组件的配置方法
将每条路由映射到应该显示的组件上。
[H2] ? 支持历史模式
有 HTML5、hash 或记忆历史模式可供选择。
[H2] ? 支持滚动控制
可精确控制每个页面的滚动位置。
[H2] ? 支持自动编码
可直接在代码中使用 unicode 字符（你好）。
[H3] Gold Sponsors
[IMG: CodeRabbit]
[H3] Silver Sponsors
[IMG: VueMastery]
[IMG: Controla]
[IMG: SendCloud]
成为赞助者！

Are you an LLM? You can read better optimized documentation at /installation.md for this page in Markdown format
[H1] Installation ​
[IMG: Vue Mastery Logo]
Get the Vue Router Cheat Sheet from Vue Mastery
[H2] Package managers ​
If you have an existing project that uses a JavaScript package manager, you can install Vue Router from the npm registry:npmyarnpnpmbunbashnpm install vue-routerbashyarn add vue-routerbashpnpm add vue-routerbashbun add vue-routerIf you're starting a new project, you might find it easier to use the create-vue scaffolding tool, which creates a Vite-based project with the option to include Vue Router:npmyarnpnpmbunbashnpm create vue@latestbashyarn create vuebashpnpm create vuebashbun create vueYou'll be prompted with some questions about the kind of project you want to create. If you choose to install Vue Router, the example application will also demonstrate some of Vue Router's core features.Projects using package managers will typically use ES modules to access Vue Router, e.g. import { createRouter } from 'vue-router'.
[H2] Direct Download / CDN ​
If you don't want to use a bundler, you can instead load Vue Router directly into the browser, either via a CDN or by downloading the relevant files and hosting them yourself.Vue Router provides multiple pre-built files to cover a variety of use cases, similar to Vue. If you aren't already familiar with how Vue handles this, we recommend reading about that first:https://vuejs.org/guide/quick-start.html#using-vue-from-cdnVue Router supports both ES module and global builds. We recommend using ES modules where possible.Whichever approach you choose, it's important to pin versions for the libraries you're using, especially in production. This means you should include the exact version you want to use in the CDN URLs, rather than allowing the CDN to choose the latest version for you.Each build comes with a development and production version. The development versions are significantly larger but include extra code to aid with debugging. The production versions have .prod in their names.
[H3] Using ES modules ​
html<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue@3.5.34/dist/vue.esm-browser.js",
"vue-router": "https://unpkg.com/vue-router@5.0.7/dist/vue-router.esm-browser.js",
"@vue/devtools-api": "https://unpkg.com/@vue/devtools-api@8.1.2/dist/vue-devtools-api.esm-browser.js"
}
}
</script>
<script type="module">
import { createApp } from 'vue'
import { createRouter } from 'vue-router'
// ...
</script>@vue/devtools-api is only needed when using the development build of Vue Router. It can be removed when using the production build, vue-router.esm-browser.prod.js.
[H3] Using the global build ​
html<script src="https://unpkg.com/vue@3.5.34/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue-router@5.0.7/dist/vue-router.global.js"></script>
<script>
const { createApp } = Vue
const { createRouter } = VueRouter
// ...
</script>The corresponding production build of Vue Router is called vue-router.global.prod.js.✨Vibe code Vue apps with confidenceRuleKit

Are you an LLM? You can read better optimized documentation at /guide.md for this page in Markdown format
[H1] Getting Started ​
Watch a Free Vue Router Video CourseVue Router is the official client-side routing solution for Vue.Client-side routing is used by single-page applications (SPAs) to tie the browser URL to the content seen by the user. As users navigate around the application, the URL updates accordingly, but the page doesn't need to be reloaded from the server.Vue Router is built on Vue's component system. You configure routes to tell Vue Router which components to show for each URL path.This guide will assume that you are already familiar with Vue itself. You don't need to be a Vue expert, but you may occasionally need to refer back to the core Vue documentation for more information about certain features.✨Vibe code Vue apps with confidenceRuleKit
[H2] An example ​
To introduce some of the main ideas, we're going to consider this example:Vue Playground exampleLet's start by looking at the root component, App.vue.
[H3] App.vue ​
App.vuevue<template>
<h1>Hello App!</h1>
<p><strong>Current route path:</strong> {{ $route.fullPath }}</p>
<nav>
<RouterLink to="/">Go to Home</RouterLink>
<RouterLink to="/about">Go to About</RouterLink>
</nav>
<main>
<RouterView />
</main>
</template>This template is using two components provided by Vue Router, RouterLink and RouterView.Instead of using regular <a> tags, we use the custom component RouterLink to create links. This allows Vue Router to change the URL without reloading the page, handle URL generation, encoding, and various other features. We'll go into more detail about RouterLink in later sections of the guide.The RouterView component tells Vue Router where to render the current route component. That's the component that corresponds to the current URL path. It doesn't have to be in App.vue, you can put it anywhere to adapt it to your layout, but it does need to be included somewhere, otherwise Vue Router won't render anything.The example above also uses {{ $route.fullPath }}. You can use $route in your component templates to access an object that represents the current route.
[IMG: Vue Mastery Logo]
Get the Vue Router Cheat Sheet from Vue Mastery
[H3] Creating the router instance ​
The router instance is created by calling the function createRouter():jsimport { createMemoryHistory, createRouter } from 'vue-router'
import HomeView from './HomeView.vue'
import AboutView from './AboutView.vue'
const routes = [
{ path: '/', component: HomeView },
{ path: '/about', component: AboutView },
]
export const router = createRouter({
history: createMemoryHistory(),
routes,
})The routes option defines the routes themselves, mapping URL paths to components. The component specified by the component option is the one that will be rendered by the <RouterView> in our earlier App.vue. These route components are sometimes referred to as views, though they are just normal Vue components.Routes support various other options that we'll see later in the guide, but for now we only need path and component.The history option controls how routes are mapped onto URLs and vice versa. For the Playground example we're using createMemoryHistory(), which ignores the browser URL entirely and uses its own internal URL instead. That works well for the Playground, but it's unlikely to be what you'd want in a real application. Typically, you'd want to use createWebHistory() instead, or perhaps createWebHashHistory(). We'll cover that topic in more detail in the guide to History modes.
[H3] Registering the router plugin ​
Once we've created our router instance, we need to register it as a plugin by calling use() on our application:jscreateApp(App).use(router).mount('#app')Or, equivalently:jsconst app = createApp(App)
app.use(router)
app.mount('#app')Like with most Vue plugins, the call to use() needs to happen before the call to mount().If you're curious about what this plugin does, some of its responsibilities include:Globally registering the RouterView and RouterLink components.Adding the global $router and $route properties.Enabling the useRouter() and useRoute() composables.Triggering the router to resolve the initial route.
[H3] Accessing the router and current route ​
You'll likely want to access the router from elsewhere in your application.If you're exporting the router instance from an ES module, you could import the router instance directly where you need it. In some cases this is the best approach, but we have other options if we're inside a component.In component templates, the router instance is exposed as $router. This is similar to the $route property we saw earlier, but note the extra r on the end.If we're using the Options API, we can access these same two properties as this.$router and this.$route in our JavaScript code. The HomeView.vue component in the Playground example accesses the router that way:jsexport default {
methods: {
goToAbout() {
this.$router.push('/about')
},
},
}This method is calling push(), which is used for programmatic navigation. We'll learn more about that later.With the Composition API, we don't have access to the component instance via this, so Vue Router includes some composables that we can use instead. AboutView.vue in the Playground example is using that approach:vue<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
const search = computed({
get() {
return route.query.search ?? ''
},
set(search) {
router.replace({ query: { search } })
},
})
</script>It's not necessary to understand all of that code right now. The key thing to notice is that the composables useRouter() and useRoute() are used to access the router instance and current route respectively.
[H3] Next steps ​
If you'd like to see a complete example using Vite, you can use the create-vue scaffolding tool, which has the option to include Vue Router in its example project:npmyarnpnpmbashnpm create vue@latestbashyarn create vuebashpnpm create vueThe example project created by create-vue uses similar features to the ones we've seen here. You may find that a useful starting point for exploring the features introduced in the next few pages of this guide.
[H2] Conventions in this guide ​
[H3] Single-File Components ​
Vue Router is most commonly used in applications built using a bundler (e.g. Vite) and SFCs (i.e. .vue files). Most of the examples in this guide will be written in that style, but Vue Router itself doesn't require you to use build tools or SFCs.For example, if you're using the global builds of Vue and Vue Router, the libraries are exposed via global objects, rather than imports:jsconst { createApp } = Vue
const { createRouter, createWebHistory } = VueRouter
[H3] Component API style ​
Vue Router can be used with both the Composition API and the Options API. Where relevant, the examples in this guide will show components written in both styles. Composition API examples will typically use <script setup>, rather than an explicit setup function.If you need a refresher about the two styles, see Vue - API Styles.
[H3] router and route ​
Throughout the guide, we will often refer to the router instance as router. This is the object returned by createRouter(). How you access that object in your application will depend on the context. For example, in a component using the Composition API, it can be accessed by calling useRouter(). With the Options API, it can be accessed using this.$router.Similarly, the current route will be referred to as route. It can be accessed in components using useRoute() or this.$route, depending on which API the component is using.
[H3] RouterView and RouterLink ​
The components RouterView and RouterLink are both registered globally, so they don't need to be imported before using them in component templates. However, if you prefer, you can import them locally, e.g. import { RouterLink } from 'vue-router'.In templates, component names can be written in either PascalCase or kebab-case. Vue's template compiler supports either format, so <RouterView> and <router-view> are usually equivalent. You should follow whatever convention is used within your project.If you're using in-DOM templates then the usual caveats apply: component names must be written in kebab-case and self-closing tags are not supported. So rather than writing <RouterView />, you would need to use <router-view></router-view> instead.