本文是自己做项目时,自己对vue router的一点学习总结,一边学一边搬砖,哈哈,其乐无穷。
安装
在自己的项目目录下输入进行下载
npm install vue-router
引入
在main.js文件,引入并配置路由
import VueRouter from 'vue-router'
// 如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能
Vue.use(VueRouter)
// 实例化路由对象,传入routes对象,该routes对象可以在main.js中配置,也可以单独放到其他文件夹,
// 再引入,在下面后实现这个文件
const router = new Router({
routes,
mode: 'history'
})
// 使用
new Vue({
el: '#app',
router,
render: h => h(App)
})
配置路由
新建route.js
// 先import各个需要用路由导航的组件
import Home from './components/Home'
import Menu from './components/Menu'
import Admin from './components/Admin'
const routes = {
{
path: '/',
name: 'homeLink', // 此项可以不要
component: Home
},
{
path: '/menu',
name: 'menuLink',
component: Menu
},
{
path: '/admin',
name: 'adminLink',
component: Admin
},
{ //该项可以在用户输入错误网址时,跳转到home页
path: '*',
redirect: '/'
}
}
此时,路由配置已经完成,下面就是使用环节
使用
在App.vue中
<template>
<div id="app">
<ul class="navBar">
// 此处可以用a标签,和可以用router-link,但用router-link标签时可避免网页刷新
// 可以用tag属性指定router-link标签是什么标签,默认为a标签
<li><router-link to="/">Home<router-link></li> // 第一种跳转方式,通过path
<li><router-link to="menu" tag="div">Menu<router-link></li> // 通过tag指定,打开检察元素,此时,该<li>包裹了一个div标签
<li><router-link :to="{name: 'adminLink'}">Admin<router-link></li> // 第二种,通过name
</ul>
<router-view/> // 路由模块展示的地方
</div>
</template>
<script>
export default {
}
</script>