Vue关键内容
1.
创建一个模板
<template>
<div id="app">
<div style="color:red">ysk</div>
</div>
</template>
2.
将此模板导出,别处可引用
export default {
name: 'App',
}
3.
导入模板
import Demo from "./components/Demo";
//
components: {
Demo
}
4.
使用模板
<template>
<div id="app">
<div style="color:red">ysk</div>
<Demo/>//-------------------------
</div>
</template>
<script>
import Demo from "./components/Demo";
export default {
name: 'App',
components: {
Demo//--------------------------
}
}
安装命令
在vue项目的根目录下执行:npm install vue-router --save-dev
npm install vue-router
:文件即会下载到node_modules文件夹中
--save-dev
:保存至开发配置中,
使用Vue-Router
-
导入vue和router组件
-
显示的使用路由VueRouter
-
创建路由
//导入组件
import Vue from 'vue'
import VueRouter from 'vue-router'
import Demo from "../components/Demo";
import Index from "../components/Index"
//显示使用VueRouter
Vue.use(VueRouter)
export default new VueRouter({
routes:[//所有跳转路径配置,数组可定义多个
{
path: "/demo",//路由跳转路径
name: "Demo",//路由名称
component: Demo//路由跳向,上方导入的.vue模块
},
{
path: "/index",//路由跳转路径
name: "Index",//路由名称
component: Index//路由跳向,上方导入的.vue模块
}
]
});
- 两个组件
- 在main.js中加载路由
import Router from "./routers/"
router:Router //配置路由,
import Vue from 'vue'
import App from './App'
import Router from "./routers/"
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
//配置路由
router:Router,
components: { App },
template: '<App/>'
});
- 页面使用
<template>
<div id="app">
<h1 style="color:red">ysk</h1>
<router-link to="/demo">首页</router-link>
<router-link to="/index">模块一</router-link>
<router-view></router-view>
</div>
</template>
- 页面效果:点击对应的链接即可显示不同模块