vue-router是基于路由和组件的
- 路由用于设定访问路径,将路径和组件映射起来
- 在vue-router的单页面应用中,页面路径的改变就是组件的切换
vue-router的安装
使用vue-cli或vue ui安装vue-router可以省略手动配置步骤
手动配置和安装
步骤一:安装vue-router
npm install vue-router --save
步骤二:在模块化工程中使用,因为它是个插件,所以可以通过Vue.use()来安装路由功能
- 第一步:导入路由对象,并调用Vue.use(VueRouter)
- 第二部:创建路由实列,并传入映射配置
- 第三步:在Vue实列中挂载创建的路由实列
在项目的src文件夹下创建一个名为router的目录
在router中创建index.js文件
//index.js
import Vue from 'vue'
//导入路由对象
import VueRouter from 'vue-router'
//1.通过Vue.use(VueRouter)安装插件
Vue.use(VueRouter)
//2.创建VueRouter对象
const router = new VueRouter({
routes
})
//3.在routes中配置路由和组件之间的映射关系
const routes = [
]
//4.将router对象导出,挂载在Vue实列中
export default router
在vue实列中挂载路由
text 代码://在main.js中挂载router
import Vue from 'vue'
//导入router对象
import router from './router'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
使用vue-router的步骤
在上面我们已经配置好了vue-router,下面来看看如何使用
- 第一步:创建路由组件
- 第二步:配置路由映射,组件和路径映射关系
- 第三步:通过
和使用路由
第一步
- 创建路由组件(About,Home)
第二步
- 配置路由映射,组件和路径映射关系
//index.js
import Vue from 'vue'
//导入路由对象
import VueRouter from 'vue-router'
//导入路由组件
import Home from '../views/Home.vue'
import Home from '../views/About.vue'
//1.通过Vue.use(VueRouter)安装插件
Vue.use(VueRouter)
//2.创建VueRouter对象
const router = new VueRouter({
routes
})
//3.在routes中配置路由和组件之间的映射关系
const routes = [
//每个映射关系就是一个对象
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
},
]
//4.将router对象导出,挂载在Vue实列中
export default router
第三步
- 通过
和使用路由
在App.vue中使用路由
text 代码: <template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
</div>
</template>
通过 to 属性指定目标地址,默认渲染成带有正确链接的 a 标签,可以通过配置 tag 属性生成别的标签。 - 点击
后,会将to中的地址传递给router,<router-view/>会渲染成router中该地址所对应的组件 - <router-view/>相当于占位符
其他vue-router文章
将router修改为HTML5的history模式 & router-link的其他属性
vue的动态路由
vue的路由懒加载
vue路由的嵌套
vue-router参数传递
vue-router导航守卫
vue-router的keep-alive