Vue Router

目录

一、简介

1、前提 

2、性质

二、基本配置

1、前提

2、原理代码

三、封装VueRouter

1、创建文件

2、引入及使用

3、导出、导入router

4、配置第二个页面

四、路由跳转

1、组件

2、$router对象

五、激活样式

1、nav标签

2、找选择器

六、路由参数

1、query参数

2、params参数

3、动态路径参数

---

一、简介

1、前提 

在Webpack的【Vue组件化抽离】中，可以发现使用Vue以这种模式开发，最终打包的入口文件只有一个html文件，该程序被称为 SPA（单页应用程序），那么就没法使用传统的页面跳转去切换页面，因为Vue中已经没有真实的多页面了，都是组件(.vue)

2、性质

Vue Router 就是用于将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们，模拟一个多页面交互的效果

---

二、基本配置

1、前提

（1）终端操作

①创建项目

vue create lean-router

②进入项目目录

cd lean-router

③安装vue-router

npm install vue-router@3

④启动项目

npm run serve

（2）main.js文件操作

import Vue from 'vue'
import App from './App.vue'
// 引入
import VueRouter from 'vue-router'

// 使用
Vue.use(VueRouter)
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

2、原理代码

（1）src文件夹下新建文件夹views（项目已有就不用创建啦）=》新建HomePage.vue=》构建vue代码框架

 （2）页面组件引入

// 组件引入
import Home from "vue-router"

（3）路由映射配置

const routes=[
  {
    path:'/home',//注意是/不是./
    namePage:'HomePage',//建议写每个路由唯一的名字
    component:'Home',//注意component没有s
  }
]

（4）路由实例的创建

const router = new VueRouter({
  // routes:routes,
  routes//增强写法
})

（5）启用：在Vue实例中使用

import Vue from 'vue'
import App from './App.vue'
// 引入
import VueRouter from 'vue-router'
// 组件引入
import Home from "@/views/HomePage.vue"

// 使用
Vue.use(VueRouter)
Vue.config.productionTip = false

const routes=[
  {
    path:'/home',//注意是/不是./
    namePage:'HomePage',//建议写每个路由唯一的名字
    component:Home,//注意component没有s
  }
]

const router = new VueRouter({
  // routes:routes,
  routes//增强写法
})

new Vue({
  // Vue实例使用
  router,
  render: h => h(App),
}).$mount('#app')

（6）指定位置显示

---

三、封装VueRouter

1、创建文件

在src文件夹下创建文件夹router=》创建router.js

2、引入及使用

根据上面原理的步骤，在router.js文件中进行Vue、VueRouter、组件的引入及使用

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "@/views/HomePage.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/home", //注意是/不是./
    namePage: "HomePage", //建议写每个路由唯一的名字
    component: Home, //注意component没有s
  },
];

const router = new VueRouter({
  // routes:routes,
  routes, //增强写法
});

3、导出、导入router

router.js文件

export default router;

main.js文件

import Vue from 'vue'
import App from './App.vue'
import router from "./router/router.js"

Vue.config.productionTip = false

new Vue({
  // Vue实例使用
  router,
  render: h => h(App),
}).$mount('#app')

4、配置第二个页面

（1）在views文件夹下创建AboutPage.vue文件

（2）在router.js文件配置AboutPage新页面的路由

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "@/views/HomePage.vue";
import About from "@/views/AboutPage.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/home", //注意是/不是./
    name: "HomePage", //建议写每个路由唯一的名字
    component: Home, //注意component没有s
  },
  {
    path: "/about",
    name: "AboutPage",
    component: About,
  },
];

const router = new VueRouter({
  // routes:routes,
  routes, //增强写法
});

export default router;

---

四、路由跳转

1、组件

（1）属性

①to：指定当前组件要激活的路由，值来源于【routes】中的【path】

②tag：此组件默认渲染为``标签，传入标签名可以指定其渲染的标签

（2）App.vue文件编写

2、$router对象

（1）push(location)

location：跳转目标路由，可以是字符串路径，或一个描述地址的对象

①字符串

$router.push('home')    //注意没有./注意是router不是route

②对象

$router.push({ path: 'home' })

（2）replace()

替换掉当前的路由，不会在浏览器的 history 中记录【即页面跳转后无法返回】

①字符串

$router.replace('home')

②对象

router.replace({ path: 'home' })

（3）go(n)

在浏览器history记录中，向前或后退n步。n：整数。

---

五、激活样式

1、nav标签

没有任何样式效果，通过用于包裹

  主页 |
  关于

2、找选择器

nav .router-link-active {
  color: red;
}

---

六、路由参数

1、query参数

使用定义路由时的path属性进行跳转，参数会显示在浏览器地址栏上【刷新不会消失】

（1）传递参数

①在的to属性后加? 进行拼接

②$router对象

goHome() {
  this.$router.push({
    path:'home',
    query:{
      name:'传过去'
    }
  });
},

（2）获取参数：到传递参数的页面HomePage.vue，进行参数获取

methods: {
    getName() {
      console.log(this.$route.query);
    },
  },

2、params参数

使用定义路由时的name属性进行跳转，参数不会显示在浏览器地址栏上

（1）传递参数

goAbout() {
  this.$router.replace({
    name:'AboutPage',
    params:{
      age:18
    }
  });
},

（2）获取参数

methods: {
    getAge(){
        console.log(this.$route.params);
    }
},

（3）注意
①要在router.js文件中，定义路由name属性唯一，name:"HomePage"
②此方式跳转带参，在刷新参数会消失
③跳转时，若写成query的属性，参数参数会失败

3、动态路径参数

（1）区别

【query传参】可以让参数保留在链接里，用户分享链接时不丢失参数
【params传参】可以避免参数名暴露，但是用户分享连接时会丢失参数
【动态路径参数】结合了以上两者的优点，既能保留参数信息在链接里，又能避免暴露参数名

（2）格式：path:"path.../:key"

①在router.js文件中，进行path拼接

const routes = [
  {
    path: "/home/:userName", //注意是/不是./
    name: "HomePage", //建议写每个路由唯一的名字
    component: Home, //注意component没有s
  },
  {
    path: "/about",
    name: "AboutPage",
    component: About,
  },
];

②在App.vue文件跳转路径拼接

主页

 

（3）query传参

goHome() {
  this.$router.push({
    path:'/home/zhangsan',   //注意home前面有/
  });
},

（4）params传参

goHome() {
this.$router.push({
  name:'HomePage',
  params:{
    userName:'zhangsan'
  }
});
},