vue-router 学习笔记

原创 易露清 随笔 js 114阅读 2018-08-29 17:30:05 举报

一、vue-router 在vue中的配置
1、安装vue-router
npm install vue-router --save
2、新建router文件夹 并编辑一个 index.js的 配置文件 index.js内容
index.js 文件
import Vue from 'vue';
import VueRouter from 'vue-router';
import login from '../components/Login.vue';
import availability from '../components/availability .vue';

Vue.use(VueRouter);//vue 里面使用vue-router

//定义路由文件
// 每个路由应该映射一个组件。 其中"component" 是映射的组件 ‘path'是路由路劲
const routes = [
{
path: '/login',
component: login,
meta: {title: '登录'}
},
{
path: '/availability',
meta: {title: '可用性监测'},
component:availability
}
];

//创建 router 实例,然后传 routes 路由文件
const router = new VueRouter({
routes // (缩写)相当于 routes: routes
});

//router钩子函数
//to: router即将要进入的目标 路由对象
//from: router正要离开的路由
router.beforeEach((to, from, next) => {
document.title = to.meta.title || '玄武盾SaaS云安全服务平台';
next();//确保要调用 next 方法,否则钩子就不会起作用
});

export default router; //导出router
3、在main.js 里面引入路由
main.js

import Vue from 'vue'
import App from './App'
import router from './router'; //router 相当于route.js中export default的 router
import axios from './axios'

//vue原型链上绑定变量
Vue.prototype.$ajax = axios;
Vue.prototype.$adminDomain = 'http://xxx.cn';

//vue 实例化
new Vue({
el: '#app', //挂载点
router, //添加router
template: '<App/>',
components: {
App,
}
});

二、vue-router 组件
1、<router-view> </router-view> //通过该组件来渲染页面
2、<router-link></router-link> //相当于a标签
<router-link :to="/home">Home</router-link> //":to" 属 性 相当于a标签中的"herf"属性,后面跟跳转链接所用 点击后跳转到home页面
<router-link :to="/home" active-class="u-link--Active">Home</router-link> //"active-class" 属 性 设置激活链接时class属性,也就是当前页面所有与当前地址所匹配的的链接都会被添加class属性、

三、具体组件中运用router
1、router.push(location, onComplete?, onAbort?)
// 方式一:字符串路径
// 方式一:字符串路径//路劲跳转
router.push('/user')
router.push({ path: '/user' })
// 方式二:路由名称 //属性跳转
router.push({ name: 'user'})

、、、本文参考文档
1、https://blog.csdn.net/ligang2585116/article/details/79051951
2、vue-router官方文档 https://router.vuejs.org/zh/guide/#html

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复