基本用法
一.安装和引入和使用vue-router（一步到位）
1.安装(npm安装，看不懂的可以不用往下看了）
npm install vue-router
2.创建路由文件 路径：/src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue' //引入组件，用于下面login路由指向
import Demo1 from '../pages/demo1' //直接import引入的组件会在初始的时候全部加载，降低速度，建议使用懒加载
Vue.use(VueRouter)
const routes = [
{
path: '/',
name:"路径名称", //可以不写
redirect: '/login', //如果是/路径, 重定向到login页面
},
{
path: '/login',
component: Login, // 上面引入的login
},
{
path: '/demo1',
component: Demo1, //正常加载
},
{
path: 'a',
component: resolve => require(['@/pages/practice/a'], resolve), //这是懒加载引入方式
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes,
})
export default router
-------如果要设置子路由（也叫 "二级路由"或"嵌套路由"）不用就跳过
{
path: '/standard',
name: 'standard',
component: resolve => require(['@/pages/template/standard'], resolve),
children: [
{
path: 'a',
component: resolve => require(['@/pages/practice/a'], resolve),
},
{
path: 'b',
component: resolve => require(['@/pages/practice/b'], resolve),
},
{
path: 'c', //子路由c
component: resolve => require(['@/pages/practice/c'], resolve),
},
]
},
3.在html中使用vue-router占位符
<template>
<div id="app">
<!-- 路由占位符 -->
<router-view></router-view>
</div>
</template>
4.在main.js使用使用vue-router
import Vue from 'vue'
import App from './App.vue'
import router from './router' // 引入上面创建路由文件
new Vue({
router, //使用router
render: (h) => h(App),
}).$mount('#app')
5.路由跳转的使用
<router-link to="/login">点击跳转login组件 </router-link>
<router-link to="/index">点击跳转首页组件 </router-link>
高级用法
二. 路由的加载方式（影响vue项目首页打开速度）
懒加载（使用会更快打开首页）
resolve => require(['@/pages/practice/c'], resolve)
es模块加载（会全部页面加载完成）
component: import Login from '../components/Login.vue'
或
component:()=>import("../views/HelloWorld/index.vue")
三.使用js方式进行跳转链接
1.原生方式:
window.open("URL"); 打开新窗口
window.location.href="URL"; 在当前页面打开新页面
2.vue-router跳转路由：
//1、声明式：
<router-link :to="{path: '/home/sort/detail', query:{id: 'abc'}}">点击查看子页面</router-link>
<router-link :to="{name: 'detail', params:{id: 'abc'}}">点击查看子页面</router-link>
// :to="" 可以实现绑定动态的 路由 和 参数
// 2、编程式：(带有参数)
1） this.$router.push({path: '/home/sort/detail',query:{id: 'abc'}})
2） this.$router.push({name: 'detail',params:{id: 'abc'}})
//备注： params 和 query 传参的区别：
//1、params传参时 参数不会出现在url的路径上面， 但是刷新页面时param里面的数据会消失
//2、query传参时 参数出现在url的路径上面， 刷新页面时query里面的数据不变
3). this.$router.replace() (用法同上,push)
4). this.$router.go(n) //向前或者向后跳转n个页面，n可为正整数或负整数
Ps : 区别
this.$router.push
跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面
this.$router.replace
跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面)
四.路由传参
1.传递参数：在路径中标记动态参数名字 /:name
{
path: '/demo2/:name',
component: Demo2,
},
2.路由中传递参数
<div>
<router-link to="/demo2/王花花">练习用：跳转首页</router-link>
<router-link to="/demo2/李某人">练习用：跳转首页</router-link>
<router-link to="/demo2/王花花">练习用：跳转首页</router-link>
</div>
3.在跳转后的页面接收参数值(两种get/post)
<div >
{{$route.params.name}}
{{$route.query.age}}
</div>
4.追加路由(两种写法)
localhost:8080/demo2/王花花/more/more/more // 出现重复追加
<router-link to="more" append>更多信息</router-link> //会有重复追加
<router-link :to="'/user/ + $route.params.name + /more'" append>更多信息</router-link>
<router-view></router-view>
五.占位视图命名
<router-view name="view1"></router-view>
<router-view name="view1"></router-view>
//占位符对应的路径写法view1 和 view2
{
path: '/post',
components: {
view1: {
path: '/demo1',
component: Demo1,
},
view2: {
path: '/demo2',
component: Demo2,
},
},
},
六.路由守卫
//路由守卫
router.beforeEach(function(to, from, next) {
// next() // 正常执行
// next(false) //所有页面都不可进入
var login_in = false
if (!login_in && to.path === '/post') {
next('login') // 跳转到登录页
} else {
next()
}
})
给路由添加属性login_required
{
path: '/demo1',
meta: {
login_required: true,
},
component: Demo1,
}
//调用router跳转beforeEach函数进行区分跳转
router.beforeEach(function(to, from, next) {
// next() // 正常执行
// next(false) //所有页面都不可进入
if (
to.matched.some(function(item) {
return item.meta.login_required
})
) {
next('login') // 跳转到登录页
} else {
next()
}
})
