学习目标:
Vue-Router路由的使用
学习内容:
Vue-Router路由
学习时间:
学习产出:
Vue-Router路由
1、介绍
Vue Router是Vue.js官方的路由管理器(路径跳转)。它和Vue.js的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于Vue.js过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动**的CSS class的链接
- HTML5历史模式或hash模式,在IE9中自动降级
- 自定义的滚动条行为
2、安装
在前面测试vue-cli的项目中进行过测试,控制台输入命令
npm install vue-router --save-dev
安装完成后去node_modules文件夹下查看是否有vue-router文件夹,有就是下载成功
3、Vue-Router程序
-
1、将myvue项目中的 assert下的logo图片、component定义的helloworld组件
-
2、前端展示组件内容
-
(1)在components目录下存放我们自己定义的组件:Content.vue、Main.vue
-
Content.vue
<template>
<h1>童一</h1>
</template>
<script>
export default {
name: "Content"
}
</script>
<style scoped>
</style>
- Main.vue
<template>
<div><h1>首页</h1></div>
</template>
<script>
export default {
name: "Main"
}
</script>
<style scoped>
</style>
- (2)、修改App.vue内容
- App.vue
<template>
<div id="app">
<h1>你好</h1>
<router-link to="/main">首页</router-link>
<router-link to="/content">内容</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
- 3、js文件控制内容
- (1)、安装路由:创建一个router目录,在目录下新建文件index.js,专门存放路由
- index.js
import Vue from 'vue'
/*导入路由插件*/
import Router from 'vue-router'
/*导入定义的组件*/
import Content from "../components/Content"
import Main from "../components/Main"
/*安装路由*/
Vue.use(Router);
/*配置路由*/
export default new Router({
routes:[
{
/*路由路径:地址有content就会进入这个组件*/
path:'/content',
/*路由名字*/
name:'content',
/*跳转到组件*/
component:Content
},
{
path:'/main',
name:'main',
component: Main
}
]
});
- (2)、配置路由:修改根目录下main.js
- main.js
import Vue from 'vue'
import App from './App'
import router from './router'/*自动扫描路由配置(会自动寻找index.js)*/
/*关闭生产模式下给出的提示*/
Vue.config.productionTip = false
new Vue({
el: '#app',
//配置路由
router,
components: { App },
template: '<App/>'
})
控制台输入npm run dev运行,显示页面则成功