基本用法

一.安装和引入和使用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()
  }
})