以下是在vue框架中搭建路由的全过程,包括全部代码。
如果你的文件中没有 router文件夹,可以使用以下命令创建:
vue add router
注意:生成的路由文件会因为选择的自定义选项不同,而有所差异
router文件夹下的index.js代码如下:
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
views下的AboutView.vue文件如下:
This is an about page
This is an about page
views下的HelloView.vue文件如下:
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'HomeView',
components: {
HelloWorld
}
}
App.vue文件如下:
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
nav {
padding: 30px;
}
nav a {
font-weight: bold;
color: #2c3e50;
}
nav a.router-link-exact-active {
color: #42b983;
}
mian.js文件如下:
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
main.js文件写成下面这样也是可以的:
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')
修改router文件夹下的index.js代码如下:
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
component: () => import( '../views/AboutView.vue')
},
// 新建一个test路由
// path指定了路由的路径,即当用户访问该路径时,该路由会被匹配到什么地方。
// name为该路由指定一个名称,可以在其他地方使用该名称来引用该路由。
// component:指定了该路由对应的组件。在这个例子中,使用了动态导入的方式来引入一个名为TestView.vue的组件。
{
path: '/test',
name: 'test',
component: () => import('../views/TestView.vue')
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
component: () => import( '../views/AboutView.vue')
},
// 新建一个test路由
// path指定了路由的路径,即当用户访问该路径时,该路由会被匹配到什么地方。
// name为该路由指定一个名称,可以在其他地方使用该名称来引用该路由。
// component:指定了该路由对应的组件。在这个例子中,使用了动态导入的方式来引入一个名为TestView.vue的组件。
{
path: '/test',
name: 'test',
component: () => import('../views/TestView.vue')
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
自定义Vue组件
vue文件要符合命名规范,不然会报错,可以写成TestView.vue的形式
在views文件夹下新增TestView.vue文件:
test
test
在终端执行以下命令:
npm run serve
访问:
localhost:8080
觉得有用可以点赞或收藏!