vue-router配置介绍和使用方法(一)
1. vue-router配置流程概述:1)准备工作:建立项目文件夹,通过cmd命令,完成新建文件夹的相关项目配置(具体操作,请参考[“如何进行 node.js的 安装与卸载 ”](https://blog.csdn.net/qq_35393869/article/details/80088193));vue init webpack 项目文件名接着按要求配置Project n...
·
文章目录
1. vue-router
配置流程概述:
1) 准备工作:
- 建立
vue.js
项目文件夹,通过cmd
命令,完成新建文件夹的相关项目配置(具体操作,请参考“如何进行 node.js的 安装与卸载 ”); vue init webpack
项目文件名- 接着按要求配置
Project name
、author
、vue-router
(选择Yes
)等等相关参数 cd 项目文件名
npm install
npm run dev
2) 在main.js
文件中,进行关于(首页)主体文件(App.vue)的基础配置:
-
引入
Vue主体
-
引入
vue-router主体
-
引入一个个
link路由
对象:- 在
main.js
文件中,创建路由对象并配置路由规则(如下绿色加粗代码):let router = new VueRouter({ //routes routes: [ //component后面是一个个link对象 {path: '/home',name: 'app',component: Home}, {path: '/hello',name: 'app',component: HelloWorld} ] }); // 注意:单词拼写是: ```component```, 不加 ```s```!
- 在
-
安装插件vue-router(挂载属性) ,如右侧代码:Vue.use(VueRouter);
3) 建立相关路由文件夹,及相关路由文件(类如home.vue/about.vue
文件)
4) 留坑,在app.vue
文件中留坑,如右侧代码: <router-view></router-view>
5) new Vue
启动 ,如右侧代码:new Vue({ •••省略••• });
6) 最后浏览器查看下实时效果。
效果图预览:
2. 文件目录结构预览:
3. 相关代码,参看如下:
main.js文件
import Vue from 'vue';
import VueRouter from 'vue-router';
//引入主体(页面初始化显示)
import App from './components/app.vue';
//一个个link对象 - 分类
import Home from './components/home.vue';
import HelloWorld from '@/components/HelloWorld';
//安装插件
Vue.use(VueRouter);//挂载属性
//创建路由对象并配置路由规则
let router = new VueRouter({
//routes
routes: [
//一个个link对象
{path: '/home',name: 'app',component: Home},
{path: '/hello',name: 'app',component: HelloWorld}
]
});
/* new Vue 启动 */
new Vue({
el: '#app',
render: c => c(App),
//让vue知道我们的路由规则
router:router,//可以简写为router
})
app.vue文件
<template>
<div>
<!--留坑,非常重要-->
<router-view></router-view>
</div>
</template>
<script>
export default {
data(){
return{
}
},
methods:{
}
}
</script>
<style scoped>
</style>
home.vue文件
<template>
<div>
我是主页
</div>
</template>
<script>
</script>
<style scoped>
</style>
以上就是关于“vue-router配置介绍和使用方法(一)”的全部内容。
更多推荐
已为社区贡献51条内容
所有评论(0)