vue路由

本文介绍了如何使用vue-cli初始化项目,并通过Vue Router实现页面路由跳转。在App.vue中设置路由链接,引入组件。在main.js中配置路由,并创建组件实例。分别创建了goods、ratings和seller三个组件,实现不同页面内容展示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 vue-cli 全局安装
 命令行执行 : npm install -g vue-cli    // 加-g是安装到全局
安装完成以后 可以输入命令 :vue 回车,可以看到针对vue的命令行;

初始化项目
执行命令: vue init webpack demo(你新建的项目名称/文件名称)
执行之后将会 自动初始化一个文件夹 :demo

npm install //安装依赖

npm run dev



App.vue
<template>
<div id='app'>
<v-header></v-header>
<div class='tab'>
<div class='tab-item'>
<router-link to="/goods">商品</router-link>
</div>
<div class='tab-item'>
<router-link to="/ratings">评论</router-link>
</div>
<div class='tab-item'>
<router-link to="/seller">商家</router-link>
</div>
</div>
<div class='content'>
<router-view></router-view>
</div>
</div>
</template>

<script>
import header from './components/header/header.vue'
export default{
components:{
'v-header':header
}
}
</script>
<style>
.tab{
width:100%;
height:40px;
line-height:40px;
display:flex;
}
.tab .tab-item{
flex:1;
text-align:center;
}
</style>

main.js //定义路由

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router' //配置文件中为'vue-router
import goods from './components/goods/goods.vue'
import ratings from './components/ratings/ratings.vue'
import seller from './components/seller/seller.vue'
import VueResource from 'vue-resource'

Vue.use(VueRouter)

Vue.config.productionTip = false

const routes = [
{ path: '/goods', component:goods},
{ path: '/ratings', component:ratings},
{ path: '/seller', component:seller}
]

const router = new VueRouter({
routes // routes: routes 的简写
})

const app = new Vue({
el:'#app',
router,
components: { App },
template: '<App/>'
})


header.vue //公用组件
<template>
<div class='header'>
我是header
</div>
</template>

<script>
export default{}
</script>

<style>
.header{
width:100%;
height:60px;
line-height:60px;
font-size:18px;
text-align:center;
color:#999;
}
</style>


goods.vue
<template>
<div>I am goods</div>
</template>

<script>
export default{}
</script>

<style></style>

seller.vue
<template>
<div>I am seller</div>
</template>

<script>
export default{}
</script>

<style></style>

ratings.vue
<template>
<div>I am ratings</div>
</template>

<script>
export default{}
</script>

<style></style>

### Vue.js 路由使用指南及配置示例 Vue Router 是 Vue.js 官方提供的路由管理器,用于在单页面应用中实现导航和页面切换功能。以下是关于 Vue.js 路由的详细使用方法和配置示例。 #### 1. 安装 Vue Router 如果项目是通过 Vue CLI 创建的,可以使用以下命令安装 Vue Router: ```bash npm install vue-router ``` #### 2. 配置路由 创建一个 `router.js` 文件来定义路由规则。例如: ```javascript import { createRouter, createWebHistory } from 'vue-router'; import Home from './views/Home.vue'; import About from './views/About.vue'; import Contact from './views/Contact.vue'; const routes = [ { path: '/', component: Home }, { path: '/about', component: About }, { path: '/contact', component: Contact } ]; const router = createRouter({ history: createWebHistory(), routes }); export default router; ``` #### 3. 在 Vue 实例中使用路由路由实例注入到 Vue 实例中,并指定挂载元素作为路由出口。例如: ```javascript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; createApp(App).use(router).mount('#app'); ``` #### 4. 创建路由组件 在 `views` 文件夹中创建 `Home.vue`、`About.vue` 和 `Contact.vue` 组件。例如,`About.vue` 的内容如下: ```vue <template> <div> <h1>关于页面</h1> <p>这是关于页面的内容。</p> </div> </template> <script> export default { name: 'About' }; </script> ``` #### 5. 使用 `<router-view>` 渲染组件 在主应用文件(如 `App.vue`)中,使用 `<router-view>` 标签来渲染匹配的路由组件: ```vue <template> <div id="app"> <nav> <router-link to="/">首页</router-link> | <router-link to="/about">关于</router-link> | <router-link to="/contact">联系我们</router-link> </nav> <router-view></router-view> </div> </template> ``` #### 6. 动态路由与参数传递 可以通过动态路由的方式传递参数。例如,定义一个带有参数的路由规则: ```javascript const routes = [ { path: '/user/:id', component: User } ]; ``` 在组件中可以通过 `this.$route.params.id` 获取参数值[^1]。 #### 7. 嵌套路由 嵌套路由允许在一个路由组件中嵌套其他路由组件。例如: ```javascript const routes = [ { path: '/user/:id', component: User, children: [ { path: 'profile', component: UserProfile }, { path: 'posts', component: UserPosts } ] } ]; ``` #### 8. 导航守卫 Vue Router 提供了导航守卫功能,用于在路由切换时执行逻辑。例如,全局前置守卫: ```javascript router.beforeEach((to, from, next) => { if (to.path === '/about' && !isAuthenticated) { next('/login'); } else { next(); } }); ``` #### 9. 滚动行为 可以通过配置滚动行为,在路由切换时控制页面滚动位置。例如: ```javascript const router = createRouter({ history: createWebHistory(), routes, scrollBehavior(to, from, savedPosition) { if (savedPosition) { return savedPosition; } else { return { top: 0 }; } } }); ``` ### 示例代码总结 以上是一个完整的 Vue.js 路由配置和使用示例[^1]。通过这些步骤,可以快速搭建一个支持多页面切换的单页面应用。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值