I've been experimenting with the Vue Router, but it's not giving me the expected outcome.
While following the tutorial on https://router.vuejs.org/guide/, I found that if I use the CDN and place it in a standalone HTML file, it works fine. However, when I try to implement it in this way, it doesn't work as intended:
Steps for Reproduction:
- Run
npm create vue@3 - Configuration:
- Project name:... vue-project
- Add TypeScript? Yes
- Add JSX Support? Yes
- Add Vue Router for Single Page Application development? Yes
- Add Pinia for state management? No
- Add Vitest for Unit Testing? No
- Add an End-to-End Testing Solution? No
- Add ESLint for code quality? No
- Install all dependencies
- Change
src/main.tsto
import * as Vue from 'vue'
import * as VueRouter from 'vue-router'
// 1. Define route components.
// These can be imported from other files
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }
// 2. Define some routes
// Each route should map to a component.
// We'll talk about nested routes later.
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
// { path: '/smm', component: About },
]
// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = VueRouter.createRouter({
// 4. Provide the history implementation to use. We are using the hash history for simplicity here.
history: VueRouter.createWebHashHistory(),
routes, // short for `routes: routes`
})
// 5. Create and mount the root instance.
const app = Vue.createApp({})
// Make sure to _use_ the router instance to make the
// whole app router-aware.
app.use(router)
app.mount('#app')
- Change
index.htmlto
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- use the router-link component for navigation. -->
<!-- specify the link by passing the `to` prop. -->
<!-- `<router-link>` will render an `<a>` tag with the correct `href` attribute -->
<router-link to="/">Go to Home</router-link>
<router-link to="/about">Go to About</router-link>
</p>
<!-- route outlet -->
<!-- component matched by the route will render here -->
<router-view></router-view>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
- run `yarn start`
Versions of Vue and vue-router being used:
"dependencies": {
"vue": "^3.3.2",
"vue-router": "^4.2.0"
},