03 vue-router-基础知识点

Vue-Router基础知识点

一、vue-router安装与初步使用

1. 安装vue-router

npm install vue-router --save

2. 在src/components目录中创建两个个Vue组件页面

<!--page1.vue-->

<template>

  <div>
    <h2>vueRouterPage1</h2>
    <p>第一页面</p>
  </div>

</template>

<script>
  export default {
    name: "page1"
  }
</script>

<style scoped>

</style>

<!--page2.vue-->

<template>

  <div>
    <h2>vueRouterPage2</h2>
    <p>第二页面</p>
  </div>

</template>

<script>
  export default {
    name: "page1"
  }
</script>

<style scoped>

</style>

3. 在src/router/index.js文件中配置使用路由

import VueRouter from 'vue-router'
import Vue from 'vue'
// 引入页面组件
import page1 from '../component/page1'
import page2 from '../component/page2'
// 1. 安装插件
Vue.use(VueRouter);
// 2. 创建router对象
const router new VueRouter({
    // 更改路由hash模式
    mode: 'history'
    
    // 配置路由映射关系
    routers:[
        {
            // 设置路由默认路径
            path:'',// 缺省值
            redirect:'/page1' // 重定向页面 
        },
        {
            path: '/page1'
            component:page1
        },
        {
            path: '/page2'
            component:page2
        }
    ]
});

// 3. 将router对象导出
export default router

默认情况下，路径的改变使用的是URL的hash模式，该模式下浏览器地址栏URL显示不美观，可以选择HTML5的history模式

4. 在src/main.js文件中引入router实例

import Vue from 'vue'
import App from './App'
// 引入router实例
import router from './router'

Vue.config.productionTip = false

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

5. 在src/App.vue文件中使用已经配置好路由的组件页面

<template>

  <div id="app">
    <router-link to="/page1">第一页面<router-link>
    <router-link to="/page2">第二页面<router-link>
    <router-view></router-view>
  </div>

</template>

<script>
  export default {
    name: 'App'
  }
</script>

<style scoped>

</style>

：Vue在全局注册的标签，渲染页面时变成a标签
: 组件页面显示占位符，决定显示的位置

二、router-link标签

2.1 标签的定义

**<router-link>**标签支持用户在具有路由功能的应用中 点击导航的标签，且当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。

2.2 标签的属性

1. to：表示目标路由的链接。
2. tag：该属性浏览器是默认渲染成a标签，设置tag值可以将<router-link>渲染成指定类型的标签
3. replace：设置该属性后不会留下History记录。
4. active-class：设置该属性后，可通过路由构造选项linkActiveClass用来更改默认class名。

三、动态路由

在不确定以何种的路由路径进行对页面跳转时，需要根据实际情况来动态的更改所需要的路由路径。

1. 在src/components目录中创建User.vue文件并编写内容

<template>
  <div>
    <h2>动态路由章节学习</h2>
    <p>
      学习成员为：
      <!-- 获取用户名 -->
      <strong>{{$route.params.userName}}</strong>
    </p>
  </div>
</template>

<script>
export default {
  name: "User"
};
</script>

<style scoped>
</style>

2. 在src/router/index.js文件中配置User.vue组件路由路径

import Vue from "vue";
import VueRouter from "vue-router";

import User from "../components/User";

Vue.use(VueRouter);

const routes = [
    // 配置User.vue组件路由 
  {
    path: "/user/:userName",
    component: User
  }
];

const router = new VueRouter({
  routes,
  mode: "history"
});

export default router;

动态路由路径参数：以冒号 “:” 开头

3. 在src/App.vue文件中引入User.vue组件进行展示

<template>
  <div id="app">
    <!-- 使用V-bind指令绑定to属性动态改变userName -->
    <router-link v-bind:to="'/user/'+userId">用户</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      userName: "张三丰"
    };
  }
};
</script>

<style scoped>
</style>

四、路由懒加载

一个完整的网站项目，打包部署到服务器上时的文件是十分庞大的，用户在请求不采用路由懒加载设置方式的网站页面时，服务器会把全部页面组件的文件响应到客户端，客户端在接受数据时因为文件过多的原因，客户端浏览器界面可能会出现没有内容的暂时性空白页面，这样是会使得用户体验降低。

采用路由懒加载的方式设置路由后，用户请求指定组件页面服务端就只响应返回指定文件，其他的组件页面文件会存放在服务器端，等待用户下次的请求再返回响应指定文件。

import Vue from "vue";
import VueRouter from "vue-router";
// 修改一下组件页面导入方式，来实现路由懒加载
const User = () => import("../components/User");
Vue.use(VueRouter);

const routes = [
  {
    path: "/user/:userName",
    component: User
  }
];

const router = new VueRouter({
  routes,
  mode: "history"
});

export default router;

五、嵌套路由

一个网站只包含一级路由，路由管理的任务会就变得十分繁杂。嵌套路由是一个父路由中再包一个子含路由，给路由赋予父子关系。前端实际开发中常用到嵌套路由技术的是选项卡组件界面。

1. 在src/components目录下创建两个子组件Article.vue与Images.vue

<template>
  <div>
    <h2>我的文章</h2>
    <p>Vue-Router的学习十分开心!</p>
  </div>
</template>

<script>
export default {
  name: "Article"
};
</script>

<style>
</style>

<template>
  <div>
    <h2>Vue-router学习图片</h2>
    <img src="../assets/images/5_1嵌套路由.png" />
  </div>
</template>

<script>
export default {
  name: "Images"
};
</script>

<style>
</style>

2. 在src/router/index.js中配置Home.vue与Article.vue和Images.vue嵌套路由

import Vue from "vue";
import VueRouter from "vue-router";

// 路由懒加载方式导入主页面组件与两个子组件 
const Home = () => import("../components/Home");
const Article = () => import("../components/Article");
const Images = () => import("../components/Images");

Vue.use(VueRouter);

const routes = [
  {
    // 设置父组件路由
    path: "/home",
    component: Home,
      
    // 设置两个子组件路由
    children: [
      {
        path: "article", // 子组件path的值里，开头不需要"/"
        component: Article
      },
      {
        path: "images",
        component: Images
      }
    ]
      
  }
];

const router = new VueRouter({
  routes,
  mode: "history"
});

export default router;

3. 在src/components/Home.vue中添加子组件相关标签使其在页面显示

<template>
  <div>
    <h2>vueRouter首页</h2>

    // 在Home.vue中添加<router-link>与<router-view>标签 
    <router-link to="/home/article">文章</router-link>
    <router-link to="/home/images">图片</router-link>
      
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Home"
};
</script>

<style>
</style>

六、路由参数传递

具有两种传递方式：

• parame传值方式

1. components目录下ParameTest.vue

<template>
	<div>
        <p>{{$route.params.test}}</p>
    </div>
</template>

<script>
    export default {
        name: "User"
    }
</script>

<style>
</style>

2. router目录下index.js配置（部分代码）

const router = new VueRouter({
    mode: "history",
    routes:[
    	{path: "/parame/:test"}    
    ]
});

3. src目录App.vue代码

<template>
  <div id="app">
    <router-link v-bind:to="'/parame/'+test">传值方式
    </router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      test: "李四"
    };
  }
};
</script>

<style>
</style>

浏览器地址栏显示： http://localhost:8080/parame/李四

• query传值方式

1. components目录下QueryTest.vue

<template>
  <div>
    <p>query传值方式</p>
  </div>
</template>

<script>
export default {
  name: "Query"
};
</script>

<style>
</style>

2. router目录下index.js配置（部分代码）

const router = new VueRouter({
    mode: "history",
    routes:[
        {
            path: "/query",
            component: Query
        }
    ]
});

3. src目录App.vue代码

<template>
  <div id="app">
  	<router-link 
     v-bind:to="{path:'/query',query{name:'四',age:'20',sex:'男'}}">query</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

<style>
</style>

浏览器地址栏显示： http://localhost:8080/query?name=李四&age=20&sex=男

七、全局导航守卫

导航守卫就是路由跳转过程中的一些钩子函数，再直白点路由跳转是一个大的过程，这个大的过程分为跳转前中后等等细小的过程，在每一个过程中都有一函数，这个函数能让你操作一些其他的事儿的时机，这就是导航守卫。

注：该段解释文字摘自 知乎用户 “超厉害”
文章链接： https://zhuanlan.zhihu.com/p/54112006

• 实现点击链接跳转后，浏览器标题栏显示当前组件页面标题

import Vue from "vue";
import VueRouter from "vue-router";

// 修改一下组件导入方式，来实现路由懒加载
const Home = () => import("../components/Home");
const Article = () => import("../components/Article");
const Images = () => import("../components/Images");
const User = () => import("../components/User");
const Query = () => import("../components/Query");
Vue.use(VueRouter);

const routes = [
  {
    path: "/home",
    component: Home,
      // 添加元信息
    meta: {
      title: "首页"
    },
    children: [
      {
        path: "article",
        component: Article
      },
      {
        path: "images",
        component: Images
      }
    ]
  },
  {
    path: "/user/:userName",
    component: User,
    meta: {
      title: "用户"
    }
  },
  {
    path: "/query",
    component: Query,
    meta: {
      title: "查询"
    }
  }
];

const router = new VueRouter({
  routes,
  mode: "history"
});
// 调用全局导航守卫
router.beforeEach((to, from, next) => {
  document.title = to.matched[0].meta.title;
  next();
});

export default router;