Vue Router学习笔记

学习笔记"/>

Vue Router学习笔记

本文是自己做项目时，自己对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>