• Vue.js之路由的使用

    本文主要介绍Vue.js中路由的使用。简而言之，路由是对应关系。分为前端路由和后端路由，前端路由通过事件的监听获取指定的内容，后端路由通过网址获取指定的内容。首先，本文会介绍前端路由的基本使用（未利用vue-router）,后续会介绍vue-router的具体使用。

    1.基础案例引入

    基础案例主要通过hash地址变化的监听实现了简单的路由功能。

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.     
    13.     <div id="app">
    14.         <a href="#index">主页a>
    15.         <a href="#technology">科技a>
    16.         <a href="#finance">财经a>
    17.         <a href="#sports">体育a>
    18.         
    19.         <component :is="showPart">component>
    20.     div>
    21.     <script src="./vue.min.js">script>
    22.     <script>
    23.         // 定义组件
    24.         const index = {
    25.             template: '
      主页信息
      '
    26.         };
    27.         const technology = {
    28.             template: '
      科技信息
      '
    29.         };
    30.         const finance = {
    31.             template: '
      财经信息
      '
    32.         };
    33.         const sports = {
    34.             template: '
      体育信息
      '
    35.         };
    36.         const vm = new Vue({
    37.             el: '#app',
    38.             data() {
    39.                 return {
    40.                     showPart: 'index'
    41.                 }
    42.             },
    43.             components: {
    44.                 technology,
    45.                 finance,
    46.                 index,
    47.                 sports
    48.             }
    49.         })
    50.         window.onhashchange = function() {
    51.             vm.showPart = location.hash.slice(1);
    52.         }
    53.     script>
    54. body>
    55.  
    56. html>

    2.vue-router的基本使用

    下面介绍vue-router的使用方法：

    (1)页面标签构建

    router-link会被渲染为a链接，to对应的是href属性，默认会在前面添加一个“#”.router-view为占位符，用于显示跳转后得到的内容。

    1.  <div id="app">
    2.         <router-link to="/tech">科技router-link>
    3.         <router-link to="/sports">体育router-link>
    4.         <router-view>
    5.     div>

     （2）定义组件

    组件中通过template定义显示的内容

    1.  let tech = {
    2.             template: '
      科技信息
      '
    3.         };
    4.         let sports = {
    5.             template: `
    6.             
    7.                 
      体育信息
    8.                 
    9.                 basketball
    10.                 volleyball
    11.                 
    12.
  • `
  • };
  • let b = {
  • template: '

    basketball

    '
  • };
  • let v = {
  • template: '

    volleyball

    '
  • };

    •  （3）创建vue-router对象

    通过VueRouter创建实例化对象，利用routes可为不同组件设置指定的路径，同时可以利用重定向设置默认路径。注意：通过children可以添加子路由

    1.  // 3.创建VueRounter实例化对象
    2.         const selfRouter = new VueRouter({
    3.             // redirect重定向，当访问的路径是“/”时，直接切换为“/tech路径。可用于设置默认显示内容
    4.             routes: [{
    5.                 path: '/',
    6.                 redirect: '/tech'
    7.             }, {
    8.                 path: '/sports',
    9.                 redirect: '/sports/basketball'
    10.             }, {
    11.                 path: '/tech',
    12.                 component: tech
    13.             }, {
    14.                 path: '/sports',
    15.                 component: sports,
    16.                 children: [{
    17.                     path: '/sports/basketball',
    18.                     component: b
    19.                 }, {
    20.                     path: '/sports/volleyball',
    21.                     component: v
    22.                 }]
    23.             }]
    24.         });

     （4）Vue中挂载路由

    在Vue实例中添加router,赋值为上面创建的router对象

    1.  const vm = new Vue({
    2.             el: '#app',
    3.             data: function() {
    4.                 return {}
    5.             },
    6.             methods: {},
    7.             router: selfRouter
    8.         })

     完整代码如下：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.     <div id="app">
    13.         
    14.         <router-link to="/tech">科技router-link>
    15.         <router-link to="/sports">体育router-link>
    16.         <router-view>
    17.     div>
    18.     <script src="./vue.min.js">script>
    19.     <script src="./vue-router.min.js">script>
    20.     <script>
    21.         // 2.定义组件
    22.         let tech = {
    23.             template: '
      科技信息
      '
    24.         };
    25.         let sports = {
    26.             template: `
    27.             
    28.                 
      体育信息
    29.                 
    30.                 basketball
    31.                 volleyball
    32.                 
    33.
  • `
  • };
  • let b = {
  • template: '

    basketball

    '
  • };
  • let v = {
  • template: '

    volleyball

    '
  • };
  • // 3.创建VueRounter实例化对象
  • const selfRouter = new VueRouter({
  • // redirect重定向，当访问的路径是“/”时，直接切换为“/tech路径。可用于设置默认显示内容
  • routes: [{
  • path: '/',
  • redirect: '/tech'
  • }, {
  • path: '/sports',
  • redirect: '/sports/basketball'
  • }, {
  • path: '/tech',
  • component: tech
  • }, {
  • path: '/sports',
  • component: sports,
  • children: [{
  • path: '/sports/basketball',
  • component: b
  • }, {
  • path: '/sports/volleyball',
  • component: v
  • }]
  • }]
  • });
  • // 4.在Vue实例中挂载
  • const vm = new Vue({
  • el: '#app',
  • data: function() {
  • return {}
  • },
  • methods: {},
  • router: selfRouter
  • })
  • script>
  • body>
  • html>

    • 3.动态匹配路由

    （1）通过$route.params获取参数

    1.   const userIndo = {
    2.             template: `
      用户的ID值为{{$route.params.id}}
      `
    3.         };
    4.         let r = new VueRouter({
    5.             routes: [{
    6.                 path: '/',
    7.                 redirect: '/user/1'
    8.             }, {
    9.                 path: '/user/:id',
    10.                 component: userIndo
    11.             }]
    12.         });

     （2）利用props获取参数,props值为布尔类型

    1.  const userIndo = {
    2.             props: ['id'],
    3.             template: `
      用户的ID值为{{id}}
      `
    4.         };
    5.  let r = new VueRouter({
    6.             routes: [{
    7.                 path: '/',
    8.                 redirect: '/user/1'
    9.             }, {
    10.                 path: '/user/:id',
    11.                 component: userIndo,
    12.                 props: true
    13.             }]
    14.         });

     （3）利用props获取参数,props值为对象类型 

    1.  
    2.         const userIndo = {
    3.             props: ['uname', 'age'],
    4.             template: `
      {{uname+'-'+age}}
      `
    5.         };
    6.         let r = new VueRouter({
    7.             routes: [{
    8.                 path: '/',
    9.                 redirect: '/user/1'
    10.             }, {
    11.                 path: '/user/:id',
    12.                 component: userIndo,
    13.                 props: {
    14.                     uname: '张三',
    15.                     age: 20
    16.                 }
    17.             }]
    18.         });

     （4） 利用props获取参数,props值为函数类型 

    1.   const userIndo = {
    2.             props: ['uname', 'age', 'id'],
    3.             template: `
      {{uname+'-'+age+'-'+id}}
      `
    4.         };
    5.         let r = new VueRouter({
    6.             routes: [{
    7.                 path: '/',
    8.                 redirect: '/user/1'
    9.             }, {
    10.                 path: '/user/:id',
    11.                 component: userIndo,
    12.                 props: r => ({
    13.                     uname: '张三',
    14.                     age: 20,
    15.                     id: r.params.id
    16.                 })
    17.             }]
    18.         });

    最后一例的完整代码：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9.     
    10. head>
    11.  
    12. <body>
    13.     <div id="app">
    14.         
    15.         <router-link to="/user/1">用户1router-link>
    16.         <router-link to="/user/2">用户2router-link>
    17.         <router-link to="/user/3">用户3router-link>
    18.         <router-link to="/user/4">用户4router-link>
    19.         <router-link to="/user/5">用户5router-link>
    20.         <router-view>router-view>
    21.     div>
    22.     <script src="./vue.min.js">script>
    23.     <script src="./vue-router.min.js">script>
    24.     <script>
    25.         // 2.定义组件
    26.         const userIndo = {
    27.             props: ['uname', 'age', 'id'],
    28.             template: `
      {{uname+'-'+age+'-'+id}}
      `
    29.         };
    30.         // 3.定义路由规则，设置重定向
    31.         let r = new VueRouter({
    32.             routes: [{
    33.                 path: '/',
    34.                 redirect: '/user/1'
    35.             }, {
    36.                 path: '/user/:id',
    37.                 component: userIndo,
    38.                 props: r => ({
    39.                     uname: '张三',
    40.                     age: 20,
    41.                     id: r.params.id
    42.                 })
    43.             }]
    44.         });
    45.         // 4.在Vue实例中挂载路由
    46.         const vm = new Vue({
    47.             el: '#app',
    48.             data: function() {
    49.                 return {}
    50.             },
    51.             methods: {},
    52.             router: r
    53.         })
    54.     script>
    55. body>
    56.  
    57. html>

    4.vue-router的方法

    在介绍方法之前，首先介绍命名路由的使用。命名路由是给路由起了个名字（通过name属性）,这样可以实现指定的跳转。

    （1）push方法

    通过参数传入跳转的数据

    （2）go方法

    前进后退功能，参数为1表示前进，参数为-1表示后退。

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9.     
    10. head>
    11.  
    12. <body>
    13.     <div id="app">
    14.  
    15.         <router-link to="/user/1">用户1router-link>
    16.         <router-link to="/user/2">用户2router-link>
    17.         <router-link to="/user/3">用户3router-link>
    18.         <router-link :to="targeted()">用户4router-link>
    19.         <router-link to="/user/5">用户5router-link>
    20.         <router-view>router-view>
    21.     div>
    22.     <script src="./vue.min.js">script>
    23.     <script src="./vue-router.min.js">script>
    24.     <script>
    25.         const userIndo = {
    26.             props: ['uname', 'age', 'id'],
    27.             template: `
      {{uname+'-'+age+'-'+id}}
       
    28.             
    29.             
    30.             
      `,
  • methods: {
  • jump() {
  • // 1.push('/user/5')
  • // 2.push({path: '/user/5'})
  • // 3.this.$router.push({
  • // name: 'user',
  • // params: {
  • // id: 123
  • // }
  • // })
  • // 4
  • this.$router.push({
  • path: 'user/5',
  • // 定义查询参数
  • query: {
  • uid: 123
  • }
  • })
  • }
  • }
  • };
  • let r = new VueRouter({
  • routes: [{
  • path: '/',
  • redirect: '/user/1'
  • }, {
  • name: 'user',
  • path: '/user/:id',
  • component: userIndo,
  • props: r => ({
  • uname: '张三',
  • age: 20,
  • id: r.params.id
  • })
  • }]
  • });
  • const vm = new Vue({
  • el: '#app',
  • data: function() {
  • return {}
  • },
  • methods: {
  • targeted() {
  • return {
  • name: 'user',
  • params: {
  • id: 123
  • }
  • }
  • }
  • },
  • router: r
  • })
  • script>
  • body>
  • html>

  • 相关阅读:
    javaEE - 1（9000字详解多线程第一篇）
    014python-内置函数
    Terraform 系列-什么是 IaC?
    陈宥维《虎鹤妖师录》“显眼包”太子成长记 表演灵动获好评
    Linux——网络配置
    结构体指针的引入
    中山市 香山杯2023 Misc pintu
    计算机网络复习总结5
    爬虫时如何利用BeautifulSoup获取我们需要的数据？
    Bellman-ford算法详解
  • 原文地址：https://blog.csdn.net/weixin_44827643/article/details/126007795