路由的基本使用
一. 路由规则
二. 路由的基本使用
1. 实现导航区与展示区联动
1.1 创建两个组件
1.2 安装路由插件
1.3 展示区
1.4 创建路由文件夹
代码
// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../components/About'
import Home from '../components/Home'
//创建并暴露一个路由器
export default new VueRouter({
routes:[
{
path:'/about', //路径
component:About //对应的组件名称
},
{
path:'/home',
component:Home
}
]
})
mian.js文件注册路由
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入VueRouter
import VueRouter from 'vue-router'
//引入路由器
import router from './router'
//关闭Vue的生产提示
Vue.config.productionTip = false
//应用插件
Vue.use(VueRouter)
//创建vm
new Vue({
el:'#app',
render: h => h(App),
router:router //注册路由
})
1.5 路由标签router-link
作用: 监测路由跳转
<!-- Vue中借助router-link标签实现路由的切换 to指定路由跳转路径 active-class配置选中的高亮样式 -->
<router-link class="list-group-item" active-class="active" to="/about">About</router-link>
<router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
1.6 router-view标签使用
作用: 指定组件的呈现位置
<!-- 指定组件的呈现位置 -->
<router-view></router-view>
1.7 完整的代码
App.vue
<template>
<div>
<div class="row">
<div class="col-xs-offset-2 col-xs-8">
<div class="page-header"><h2>Vue Router Demo</h2></div>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-xs-offset-2">
<div class="list-group">
<!-- 原始html中我们使用a标签实现页面的跳转 -->
<!-- <a class="list-group-item active" href="./about.html">About</a> -->
<!-- <a class="list-group-item" href="./home.html">Home</a> -->
<!-- Vue中借助router-link标签实现路由的切换 -->
<router-link class="list-group-item" active-class="active" to="/about">About</router-link>
<router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
</div>
</div>
<div class="col-xs-6">
<div class="panel">
<div class="panel-body">
<!-- 指定组件的呈现位置 -->
<router-view></router-view>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name:'App',
}
</script>
Home.vue
<template>
<h2>我是Home的内容</h2>
</template>
<script>
export default {
name:'Home'
}
</script>
About.vue
<template>
<h2>我是About的内容</h2>
</template>
<script>
export default {
name:'About'
}
</script>
router/index.js
// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../components/About'
import Home from '../components/Home'
//创建并暴露一个路由器
export default new VueRouter({
routes:[
{
path:'/about', //跳转地址
component:About //对应的组件名称
},
{
path:'/home',
component:Home
}
]
})
main.js
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入VueRouter
import VueRouter from 'vue-router'
//引入路由器
import router from './router'
//关闭Vue的生产提示
Vue.config.productionTip = false
//应用插件
Vue.use(VueRouter)
//创建vm
new Vue({
el:'#app',
render: h => h(App),
router:router //注册路由
})
三. 总结
1. 组件注册路由
routes:[
{
path:'/about', //跳转地址
component:About //对应的组件名称
},
{
path:'/home',
component:Home
}
]
})
2. 导航栏实现路由跳转
<!-- Vue中借助router-link标签实现路由的切换 -->
<router-link class="list-group-item" active-class="active" to="/about">About</router-link>
<router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
3. 指定展示位置
<!-- 指定组件的呈现位置 -->
<router-view></router-view>
四. 几个注意点
1. 组件分类
路由组件,一般组件
将路由组件放置在pages文件夹,一般组件放置在component文件夹
2. 切换的组件去哪里???
被销毁了…