120_Vue：vue-router路由
目录
简介
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- HTML5 历史模式或 hash 模式，在 IE9 中自动降级
- 自定义的滚动条行为
安装
npm install vue-router --save-dev
或
cnpm install vue-router --save-dev
PS D:\code\vue\myvue> cnpm install vue-router --save-dev
√ Installed 1 packages
√ Linked 1 latest versions
√ Run 0 scripts
√ All packages installed (1 packages installed from npm registry, used 913ms(network 903ms), speed 163.02KB/s, json 1(21.9KB), tarball 125.31KB)
PS D:\code\vue\myvue>
引入
import VueRouter from 'vue-router'
// 显式声明使用VueRouter
Vue.use(VueRouter);
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
Vue.config.productionTip = false;
// 显式声明使用VueRouter
Vue.use(VueRouter);
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
运行测试
PS D:\code\vue\myvue> npm run dev
> myvue@1.0.0 dev D:\code\vue\myvue
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
13% building modules 32/34 modules 2 active ...index=0!D:\code\vue\myvue\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
95% emitting
DONE Compiled successfully in 32677ms 22:39:58
I Your application is running here: http://localhost:8080
使用
components目录下创建组件
首页Main.vue
<template>
<h1>首页</h1>
</template>
<script>
export default {
name: "Main"
}
</script>
<style scoped>
</style>
内容页Content.vue
<template>
<h1>内容页</h1>
</template>
<script>
export default {
name: "Content"
}
</script>
<style scoped>
</style>
创建router目录
index.js在vue中一般为配置文件
router目录下创建配置文件index.js，导入组件，安装路由，配置导出路由
import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入组件
import Content from '../components/Content'
import Main from '../components/Main'
// 安装路由
Vue.use(VueRouter);
// 配置导出路由
export default new VueRouter({
routes: [
{
// 路由路径
path: '/content',
name: 'content',
// 跳转的组件
component: Content
},
{
// 路由路径
path: '/main',
name: 'main',
// 跳转的组件
component: Main
}
]
});
main.js中配置路由扫描，配置路由
import Vue from 'vue'
import App from './App'
import router from './router' // 自动扫描目录下的路由配置，即index.js
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: '#app',
// 配置路由
router,
components: { App },
template: '<App/>'
})
App.vue使用路由
router-link：默认会被渲染成一个标签，to属性为指定链接
router-view：用于渲染路由匹配到的组件
<template>
<div id="app">
<h1>VueRouter</h1>
<!--
router-link： 默认会被渲染成一个 <a> 标签，to 属性为指定链接
router-view： 用于渲染路由匹配到的组件
-->
<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>
打包运行
D:\code\vue\myvue>npm run dev
> myvue@1.0.0 dev D:\code\vue\myvue
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
13% building modules 33/39 modules 6 active ...index=0!D:\code\vue\myvue\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
95% emitting
DONE Compiled successfully in 30761ms 17:05:14
I Your application is running here: http://localhost:8080
点击首页，下面跳转首页
点击内容页，下面跳转内容页
浙公网安备 33010602011771号