原文链接:https://blog.csdn.net/qq_34645412/article/details/78969279
1.安装
方法一:
在package.json里的package.json的的pendencies里面添加当前需要安装的版本号,最新的版本号可以去gihub上面去搜
-
"dependencies": {
-
"stylus": "^0.54.5",
-
"vue": "^2.5.2",
-
"vue-router": "^3.0.1"
-
},
配置完成之后再执行npm install 即可安装
方法二:
直接执行:
npm install vue-router --save
2.使用
1.在main.js里面引入vue-router,用import引入vue-router(PS:from后面的名字来源于vue-router的package.json的name配置),
2. 然后将暴露出来的vue-router赋值给VueRouter.
3. 用Vue.use();方法 明确地安装路由功能:(如果使用全局的 script 标签,则无须如此(手动安装)。)
-
import Vue from 'vue';
-
import App from './App';
-
import VueRouter from 'vue-router';
-
Vue.use(VueRouter);
4.在需要使用vue-router的组件里面设置路由的入口和出口:
html:
-
<template>
-
<div id="app">
-
<v-header></v-header>
-
<div class="tab">
-
<div class="tab-item">
-
<!-- 1.使用 router-link 组件来导航. -->
-
<!-- 2.通过传入 `to` 属性指定链接. -->
-
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
-
<router-link to="/foods">商品</router-link>
-
</div>
-
<div class="tab-item">
-
<router-link to="/ratings">评论</router-link>
-
</div>
-
<div class="tab-item">
-
<router-link to="/seller">商家</router-link>
-
</div>
-
</div>
-
<!-- 3.设置路由出口 -->
-
<!-- 路由匹配到的组件将渲染在这里 -->
-
<router-view></router-view>
-
</div>
-
</template>
router.js JS:
-
/**
-
* Created by F1231657 on 2018/1/4.
-
*/
-
// 1.引入vue和vue-router并赋值给相应的Vue和Router
-
import Vue from 'vue';
-
import Router from 'vue-router';
-
import goods from '@/components/goods/goods';
-
import seller from '@/components/seller/seller';
-
import rating from '@/components/rating/rating';
-
// 2.通过Vue的use方法注入Router
-
Vue.use(Router)
-
// 3.创建 router 实例,然后传 `routes` 配置
-
const router = new Router({
-
// 指定路由选中时的样式类名
-
linkActiveClass: 'active',
-
hashbang: true, // 将路径格式化为#!开头
-
history: true, // 启用HTML5 history模式,可以使用pushState和replaceState来管理记录
-
/**
-
* 4.@desc 路由配置配置具体的路径
-
*/
-
routes: [
-
{
-
path: '/goods',
-
component: goods
-
},
-
{
-
path: '/seller',
-
component: seller
-
},
-
{
-
path: '/rating',
-
component: rating
-
},
-
{
-
path: '/*',
-
component: goods
-
}
-
]
-
})
-
/**
-
* @desc 全局监听路由变化
-
*/
-
// router.beforeEach((to, from, next) => {
-
// store.dispatch('updateHistoryLength') // 变化时更新路由切换长度
-
// next()
-
// })
-
// 5.导出路由
-
export default router
PS:以上路由基于页面初始。路由的配置信息是单独放在一个文件夹里面的,所以还需要在main.js里面引入并实例化路由
main.js
-
// The Vue build version to load with the `import` command
-
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
-
import Vue from 'vue';
-
import App from './App';
-
import VueRouter from 'vue-router';
-
// 导入路由
-
import router from './router'
-
// 通过Vue的use方法注入VueRouter
-
Vue.use(VueRouter);
-
Vue.config.productionTip = false;
-
// 以下注释表示此处new的vue无需赋值给一个变量,跳过new的新对象赋值机制
-
/* eslint-disable no-new */
-
new Vue({
-
// 显示的节点处,此处为入口页的id为app的盒子
-
el: '#app',
-
// (此处相当于router:"router")实例化一个变量
-
router,
-
// 显示的模板
-
template: '<App/>',
-
// 显示的组件注册
-
components: {App}
-
});
3.总结:
vue的路由方式和angular很像,相似度极高。完整思路都是
1.在html的模板里面申明了路由的入口和出口,入口也就是说点击何处产生路由的开始,出口就是表示点击某个入口出口显示什么文件,实在理解不了参照我的angular路由的文章
2.在js里面引入vue-router,然后用vue的use()方法引入router
3.最后实例化router并配置router的路由路径
4.PS,注意如果路由是单独写在一个文件里面的需要将这个文件导出(export),然后在需要用到路由的地方import
https://router.vuejs.org/zh-cn/essentials/getting-started.html