Vue全家桶笔记07(黑马vue)--vue-router的基本使用，路由重定向，嵌套路由，动态匹配路由，props路由组件传递参数，命名路由的配置规则，vue-router编程式导航

最新推荐文章于 2023-03-02 22:07:04 发布
最新推荐文章于 2023-03-02 22:07:04 发布
阅读量453 收藏 1
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43745804/article/details/118176554
版权
1、vue-router的基本使用
  • 引入相关的库文件
  • 添加路由连接
    router-link是vue中提供的标签，默认会被渲染为a标签
    to属性默认会被渲染为href属性
    to属性的值默认会被渲染为#开头的hash地址
<div id="app">

<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>
</div>
  • 添加路由填充位
    路由填充位（也叫路由占位符）
    将来通过路由规则匹配到的组件，将会被渲染到router-view所在的位置
  <router-view></router-view>
  • 定义路由组件
  let User={
    template:`<div>User</div>`
  }
  let Register={
    template:`<div>Register</div>`
  }
  • 配置路由规则并创建路由实例
 //配置路由规则并创建路由实例
  let router=new VueRouter(
    {
      routes:[
        //每个路由规则都是一个配置对象，其中至少包含path和component两个属性：
        //path表示当前路由规则匹配的hash地址
        //component表示当前路由规则对应要展现的组件
        {
          path:'/user',
          component:User
        },
        {
          path:'/register',
          component:Register
        },
      ]
    }
  )
  • 把路由挂载到vue根实例中去
const vm=new Vue({
    el:'#app',
    router:router,
    data:{

    }
  })

完整客户端代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">

  here is index page
<!--router-link是vue中提供的标签，默认会被渲染为a标签-->
<!--  to属性默认会被渲染为href属性-->
<!--  to属性的值默认会被渲染为#开头的hash地址-->

<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>

<!--  路由填充位（也叫路由占位符）-->
<!--  将来通过路由规则匹配到的组件，将会被渲染到router-view所在的位置-->
  <router-view></router-view>
</div>

<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>

<script>
  //创建路由组件
  let User={
    template:`<div>User</div>`
  }
  let Register={
    template:`<div>Register</div>`
  }

  //配置路由规则并创建路由实例
  let router=new VueRouter(
    {
      routes:[
        //每个路由规则都是一个配置对象，其中至少包含path和component两个属性：
        //path表示当前路由规则匹配的hash地址
        //component表示当前路由规则对应要展现的组件
        {
          path:'/user',
          component:User
        },
        {
          path:'/register',
          component:Register
        },
      ]
    }
  )

  const vm=new Vue({
    el:'#app',
    router:router,
    data:{

    }
  })
</script>
</body>
</html>

服务器端代码

const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');
const app = express();

// 启动静态资源服务
app.use(express.static('public'));
// 设置允许跨域访问该服务
app.all('*', function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  res.header('Access-Control-Allow-Headers', 'mytoken');
  next();
});
// 处理请求参数
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());


// 监听端口
app.listen(3000,()=>{
    console.log('running...');
});
2、路由重定向

路由重定向指的是：用户在访问地址A的时候，强制用户跳转到地址c，从而展示特定的组件页面

通过路由规则的redirect属性，指定一个新的路由地址，可以很方便地设置路由的重定向

 //配置路由规则并创建路由实例
  let router=new VueRouter(
    {
      routes:[
        //每个路由规则都是一个配置对象，其中至少包含path和component两个属性：
        //path表示当前路由规则匹配的hash地址
        //component表示当前路由规则对应要展现的组件
        {
          path:'/',
          component:User
        },
        {
          path:'/user',
          component:User
        },
        {
          path:'/register',
          component:Register
        },
      ]
    }
  )
3、嵌套路由

1、嵌套路由功能分析

  • 点击父级路由链接显示模板内容
  • 模板内容中又有子级路由链接
  • 点击子级路由练剑显示自己模板内容

2、父级路由组件模板

  • 父级路由链接
  • 父组件路由填充位
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">

  here is index page
<!--router-link是vue中提供的标签，默认会被渲染为a标签-->
<!--  to属性默认会被渲染为href属性-->
<!--  to属性的值默认会被渲染为#开头的hash地址-->

<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>

<!--  路由填充位（也叫路由占位符）-->
<!--  将来通过路由规则匹配到的组件，将会被渲染到router-view所在的位置-->
  <router-view></router-view>
</div>

<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>

<script>
  //创建路由组件
  let User={
    template:`<div>User</div>`
  }
  let Register={
    template:`<div>
      <h1>Register</h1><hr/>

      <router-link to="/register/tab1">tab1</router-link>
      <router-link to="/register/tab2">tab2</router-link>

      <router-view></router-view>
      </div>`
  }

  let Tab1={
    template:`<h3>我是table1子组件</h3>`
  }
  let Tab2={
    template:`<h3>我是table2子组件</h3>`
  }

  //配置路由规则并创建路由实例
  let router=new VueRouter(
    {
      routes:[
        //每个路由规则都是一个配置对象，其中至少包含path和component两个属性：
        //path表示当前路由规则匹配的hash地址
        //component表示当前路由规则对应要展现的组件
        {
          path:'/',
          component:User
        },
        {
          path:'/user',
          component:User
        },
        {
          path:'/register',
          component:Register,
          children:[
            {path:'/register/tab1',component:Tab1},
            {path:'/register/tab2',component:Tab2}
          ]
        },
      ]
    }
  )

  const vm=new Vue({
    el:'#app',
    router:router,
    data:{

    }
  })
</script>
</body>
</html>
4、动态匹配路由

将路由中变动的部分作为动态参数进行匹配，就是动态路由匹配

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">

  here is index page
<!--router-link是vue中提供的标签，默认会被渲染为a标签-->
<!--  to属性默认会被渲染为href属性-->
<!--  to属性的值默认会被渲染为#开头的hash地址-->

<router-link to="/user">User</router-link>
<router-link to="/user/1">User1</router-link>
<router-link to="/user/2">User2</router-link>
<router-link to="/user/3">User3</router-link>
<router-link to="/register">Register</router-link>

<!--  路由填充位（也叫路由占位符）-->
<!--  将来通过路由规则匹配到的组件，将会被渲染到router-view所在的位置-->
  <router-view></router-view>
</div>

<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>

<script>
  //创建路由组件
  let User={
    //路由组件中通过$router.params获取路由参数
    template:`<div>User组件---{{$route.params.id}}组件</div>`
  }
  let Register={
    template:`<div>
      <h1>Register</h1><hr/>

      <router-link to="/register/tab1">tab1</router-link>
      <router-link to="/register/tab2">tab2</router-link>

      <router-view></router-view>
      </div>`
  }

  let Tab1={
    template:`<h3>我是table1子组件</h3>`
  }
  let Tab2={
    template:`<h3>我是table2子组件</h3>`
  }

  //配置路由规则并创建路由实例
  let router=new VueRouter(
    {
      routes:[
        //每个路由规则都是一个配置对象，其中至少包含path和component两个属性：
        //path表示当前路由规则匹配的hash地址
        //component表示当前路由规则对应要展现的组件
        {
          path:'/',
          component:User
        },
        {
          path:'/user/:id',
          component:User
        },
        {
          path:'/register',
          component:Register,
          children:[
            {path:'/register/tab1',component:Tab1},
            {path:'/register/tab2',component:Tab2}
          ]
        },
      ]
    }
  )

  const vm=new Vue({
    el:'#app',
    router:router,
    data:{

    }
  })
</script>
</body>
</html>
5、props路由组件传递参数

1、props指定为布尔值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">

  here is index page
<!--router-link是vue中提供的标签，默认会被渲染为a标签-->
<!--  to属性默认会被渲染为href属性-->
<!--  to属性的值默认会被渲染为#开头的hash地址-->

<router-link to="/user">User</router-link>
<router-link to="/user/1">User1</router-link>
<router-link to="/user/2">User2</router-link>
<router-link to="/user/3">User3</router-link>
<router-link to="/register">Register</router-link>

<!--  路由填充位（也叫路由占位符）-->
<!--  将来通过路由规则匹配到的组件，将会被渲染到router-view所在的位置-->
  <router-view></router-view>
</div>

<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>

<script>
  //创建路由组件
  let User={
    //使用props接受路由参数
    props:['id'],
    //路由组件中通过$router.params获取路由参数
    template:`<div>User组件---{{id}}组件</div>`
  }
  let Register={
    template:`<div>
      <h1>Register</h1><hr/>

      <router-link to="/register/tab1">tab1</router-link>
      <router-link to="/register/tab2">tab2</router-link>

      <router-view></router-view>
      </div>`
  }

  let Tab1={
    template:`<h3>我是table1子组件</h3>`
  }
  let Tab2={
    template:`<h3>我是table2子组件</h3>`
  }

  //配置路由规则并创建路由实例
  let router=new VueRouter(
    {
      routes:[
        //每个路由规则都是一个配置对象，其中至少包含path和component两个属性：
        //path表示当前路由规则匹配的hash地址
        //component表示当前路由规则对应要展现的组件
        {
          path:'/',
          component:User
        },
        {
          //如果props被设置成为true，route.params将会被设置为组件属性
          path:'/user/:id',
          component:User,
          props:true
        },
        {
          path:'/register',
          component:Register,
          children:[
            {path:'/register/tab1',component:Tab1},
            {path:'/register/tab2',component:Tab2}
          ]
        },
      ]
    }
  )

  const vm=new Vue({
    el:'#app',
    router:router,
    data:{

    }
  })
</script>
</body>
</html>

2、props指定为对象类型值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">

  here is index page
<!--router-link是vue中提供的标签，默认会被渲染为a标签-->
<!--  to属性默认会被渲染为href属性-->
<!--  to属性的值默认会被渲染为#开头的hash地址-->

<router-link to="/user">User</router-link>
<router-link to="/user/1">User1</router-link>
<router-link to="/user/2">User2</router-link>
<router-link to="/user/3">User3</router-link>
<router-link to="/register">Register</router-link>

<!--  路由填充位（也叫路由占位符）-->
<!--  将来通过路由规则匹配到的组件，将会被渲染到router-view所在的位置-->
  <router-view></router-view>
</div>

<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>

<script>
  //创建路由组件
  let User={
    //使用props接受路由参数
    props:['id','name','age'],
    //路由组件中通过$router.params获取路由参数
    template:`<div>User组件---{{id}},{{name}},{{age}}组件</div>`
  }
  let Register={
    template:`<div>
      <h1>Register</h1><hr/>

      <router-link to="/register/tab1">tab1</router-link>
      <router-link to="/register/tab2">tab2</router-link>

      <router-view></router-view>
      </div>`
  }

  let Tab1={
    template:`<h3>我是table1子组件</h3>`
  }
  let Tab2={
    template:`<h3>我是table2子组件</h3>`
  }

  //配置路由规则并创建路由实例
  let router=new VueRouter(
    {
      routes:[
        //每个路由规则都是一个配置对象，其中至少包含path和component两个属性：
        //path表示当前路由规则匹配的hash地址
        //component表示当前路由规则对应要展现的组件
        {
          path:'/',
          component:User
        },
        {
          //如果props被设置成为true，route.params将会被设置为组件属性
          path:'/user/:id',
          component:User,
          props: {
            name:'zhagnsan',
            age:34
          }
        },
        {
          path:'/register',
          component:Register,
          children:[
            {path:'/register/tab1',component:Tab1},
            {path:'/register/tab2',component:Tab2}
          ]
        },
      ]
    }
  )

  const vm=new Vue({
    el:'#app',
    router:router,
    data:{

    }
  })
</script>
</body>
</html>

3、props指定为函数类型值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">

  here is index page
<!--router-link是vue中提供的标签，默认会被渲染为a标签-->
<!--  to属性默认会被渲染为href属性-->
<!--  to属性的值默认会被渲染为#开头的hash地址-->

<router-link to="/user">User</router-link>
<router-link to="/user/1">User1</router-link>
<router-link to="/user/2">User2</router-link>
<router-link to="/user/3">User3</router-link>
<router-link to="/register">Register</router-link>

<!--  路由填充位（也叫路由占位符）-->
<!--  将来通过路由规则匹配到的组件，将会被渲染到router-view所在的位置-->
  <router-view></router-view>
</div>

<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>

<script>
  //创建路由组件
  let User={
    //使用props接受路由参数
    props:['id','name','age'],
    //路由组件中通过$router.params获取路由参数
    template:`<div>User组件---{{id}},{{name}},{{age}}组件</div>`
  }
  let Register={
    template:`<div>
      <h1>Register</h1><hr/>

      <router-link to="/register/tab1">tab1</router-link>
      <router-link to="/register/tab2">tab2</router-link>

      <router-view></router-view>
      </div>`
  }

  let Tab1={
    template:`<h3>我是table1子组件</h3>`
  }
  let Tab2={
    template:`<h3>我是table2子组件</h3>`
  }

  //配置路由规则并创建路由实例
  let router=new VueRouter(
    {
      routes:[
        //每个路由规则都是一个配置对象，其中至少包含path和component两个属性：
        //path表示当前路由规则匹配的hash地址
        //component表示当前路由规则对应要展现的组件
        {
          path:'/',
          component:User
        },
        {
          //如果props被设置成为true，route.params将会被设置为组件属性
          path:'/user/:id',
          component:User,
          props: route=>({
            name:'lisi',
            age:33,
            id:route.params.id
          })
        },
        {
          path:'/register',
          component:Register,
          children:[
            {path:'/register/tab1',component:Tab1},
            {path:'/register/tab2',component:Tab2}
          ]
        },
      ]
    }
  )

  const vm=new Vue({
    el:'#app',
    router:router,
    data:{

    }
  })
</script>
</body>
</html>
6、命名路由的配置规则

为了更加方便的表示路由的路径，可以给路由规则起一个别名，即为‘命名路由’
注意to前面要加：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">

  here is index page
<!--router-link是vue中提供的标签，默认会被渲染为a标签-->
<!--  to属性默认会被渲染为href属性-->
<!--  to属性的值默认会被渲染为#开头的hash地址-->

<router-link to="/user">User</router-link>
<router-link to="/user/1">User1</router-link>
<router-link to="/user/2">User2</router-link>
<router-link :to="{name:'user',params:{id:3}}">User3</router-link>
<router-link to="/register">Register</router-link>

<!--  路由填充位（也叫路由占位符）-->
<!--  将来通过路由规则匹配到的组件，将会被渲染到router-view所在的位置-->
  <router-view></router-view>
</div>

<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>

<script>
  //创建路由组件
  let User={
    //使用props接受路由参数
    props:['id','name','age'],
    //路由组件中通过$router.params获取路由参数
    template:`<div>User组件---{{id}},{{name}},{{age}}组件</div>`
  }
  let Register={
    template:`<div>
      <h1>Register</h1><hr/>

      <router-link to="/register/tab1">tab1</router-link>
      <router-link to="/register/tab2">tab2</router-link>

      <router-view></router-view>
      </div>`
  }

  let Tab1={
    template:`<h3>我是table1子组件</h3>`
  }
  let Tab2={
    template:`<h3>我是table2子组件</h3>`
  }

  //配置路由规则并创建路由实例
  let router=new VueRouter(
    {
      routes:[
        //每个路由规则都是一个配置对象，其中至少包含path和component两个属性：
        //path表示当前路由规则匹配的hash地址
        //component表示当前路由规则对应要展现的组件
        {
          path:'/',
          component:User
        },
        {
          name:'user',
          //如果props被设置成为true，route.params将会被设置为组件属性
          path:'/user/:id',
          component:User,
          props: route=>({
            name:'lisi',
            age:33,
            id:route.params.id
          })
        },
        {
          path:'/register',
          component:Register,
          children:[
            {path:'/register/tab1',component:Tab1},
            {path:'/register/tab2',component:Tab2}
          ]
        },
      ]
    }
  )

  const vm=new Vue({
    el:'#app',
    router:router,
    data:{

    }
  })
</script>
</body>
</html>
7、vue-router编程式导航

声明式导航：通过点击链接实现导航的方式，叫做声明式导航
如普通的a链接

编程式导航：通过调用JavaScript形式的api实现导航的方式，叫做编程式导航
如，普通网页中的location.href

常用的编程式导航API如下：

  • this.$router.push(‘hash地址’)
  • this.$router.go(n)
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">

  here is index page
<!--router-link是vue中提供的标签，默认会被渲染为a标签-->
<!--  to属性默认会被渲染为href属性-->
<!--  to属性的值默认会被渲染为#开头的hash地址-->

<router-link to="/user">User</router-link>
<router-link to="/user/1">User1</router-link>
<router-link to="/user/2">User2</router-link>
<router-link :to="{name:'user',params:{id:3}}">User3</router-link>
<router-link to="/register">Register</router-link>

<!--  路由填充位（也叫路由占位符）-->
<!--  将来通过路由规则匹配到的组件，将会被渲染到router-view所在的位置-->
  <router-view></router-view>
</div>

<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>

<script>
  //创建路由组件
  let User={
    //使用props接受路由参数
    props:['id','name','age'],
    methods:{
      //用编程的方式控制路由跳转
      goRegister:function () {
        this.$router.push('/register')
      }
    },
    //路由组件中通过$router.params获取路由参数
    template:`<div><button @click='goRegister'> 跳转到注册页面</button> </div>`
  }
  let Register={
    methods:{
      goback:function () {
        this.$router.go(-1)
      }
    },
    template:`<div>
      <button @click="goback">后退</button>
      <h1>Register</h1><hr/>

      <router-link to="/register/tab1">tab1</router-link>
      <router-link to="/register/tab2">tab2</router-link>

      <router-view></router-view>
      </div>`
  }

  let Tab1={
    template:`<h3>我是table1子组件</h3>`
  }
  let Tab2={
    template:`<h3>我是table2子组件</h3>`
  }

  //配置路由规则并创建路由实例
  let router=new VueRouter(
    {
      routes:[
        //每个路由规则都是一个配置对象，其中至少包含path和component两个属性：
        //path表示当前路由规则匹配的hash地址
        //component表示当前路由规则对应要展现的组件
        {
          path:'/',
          component:User
        },
        {
          name:'user',
          //如果props被设置成为true，route.params将会被设置为组件属性
          path:'/user/:id',
          component:User,
          props: route=>({
            name:'lisi',
            age:33,
            id:route.params.id
          })
        },
        {
          path:'/register',
          component:Register,
          children:[
            {path:'/register/tab1',component:Tab1},
            {path:'/register/tab2',component:Tab2}
          ]
        },
      ]
    }
  )

  const vm=new Vue({
    el:'#app',
    router:router,
    data:{

    }
  })
</script>
</body>
</html>
心湖中的石子
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Vue2.0】黑马课程笔记（四）Vue-router
小女不才
04-07 1152
Vue-router（九）路由的基本概念与原理(1) Vue-router的基本使用1.1 Vue-router简介1.2 Vue Router的使用步骤(★★★)1.3 路由重定向(2) Vue-router的嵌套路由2.1 嵌套路由功能分析(3) Vue-router动态路由匹配3.1 动态匹配路由的基本用法3.2 路由组件传递参数(4) Vue-router命名路由4.1 命名路由的配置规则......
vue-router的嵌套路由，重定向和别名
Yo,的博客
08-26 2315
1.命名路由     有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。我个人理解就相当于给路径取个名字，调用的时候，这个名字就指这个路径，不然有些路径很长，直接写太麻烦。 const router = new VueRouter({ routes: [ ...
Vue-Router学习笔记-（黑马视频）
weixin_42349568的博客
08-31 537
一，基本概念与原理 也就是说，后端路由就是之前学习的写服务器端的代码： //post请求参数的获取 app.post('/add',(req,res)=>{ //接收post请求参数, res.send(req.body) }) //get请求参数的获取 app.get('/index',(req,res)=>{ res.send(req.query) }) 也就是说后端渲染存在性能问题，只能支持页面全局渲染更新，于是引出了ajax技术，可以实现局部更新，但是ajax又实现不了历
Vue Router 重定向和别名
qq_26642611的博客
12-25 174
重定向 重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b： const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ] }) 重定向的目标也可以是一个命名的路由： const router = new VueRouter({ routes: [ { pa...
vue-router路由配置方法
薛定喵君的博客
03-27 2442
vue-router的配置使用 # 前端路由特点 优点 体验好,快速呈现 缺点 不利SEO 使用浏览器的前进后退时回重新发送请求，没有合理利用缓存 单页面无法记住之前滚动的位置，无法在前进、后退的时候记住滚动的位置 # 基本使用 三个基本概念 route:是一条路由，由这个英文单词也可以看出来，它是单数。Home按钮 => home内容， 这是一条route；about按钮 => ab...
VueJs路由跳转——vue-router的使用详解
11-26
在ES6中，可以导入并使用VueRouter模块： ```javascript import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const router = new VueRouter(); // 可以带有路由器的配置参数 router....
详解在vue-cli中使用路由
08-29
Vue Router还支持嵌套路由、动态路由匹配、重定向、命名视图等多种高级功能。例如，你可以为一个组件定义子路由，或者使用`props`选项传递参数。详细的路由配置和用法可以参考Vue Router的官方文档：...
搭建Vue从Vue-cli到router路由护卫的实现
10-15
搭建Vue项目通常从安装Vue CLI开始，Vue CLI是官方提供的脚手架工具，可以快速创建和配置Vue项目。首先，确保全局安装Vue CLI，对于Mac用户，可以通过以下命令执行： ```bash sudo npm install -g @vue/cli ``` ...
vue3.x+vite+ts+vue-router@4.x 路由使用demo
07-24
在这个"vue3.x+vite+ts+vue-router@4.x 路由使用demo"中，我们可以学习到以下关键知识点： 1. **Vue3 Composition API**：Vue3 引入了Composition API，允许开发者将逻辑组件化，提高了代码的复用性和组织性。在...
详解vue-router 动态路由下子页面多页共活的解决方案
10-15
const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, props: true } ] }); ``` `User` 组件通常会根据 `id` 参数获取并显示用户信息： ```vue <div>{{ user.name }} export ...
前端教程Vue全家桶：Vue2.0+Vue3.0
Aa112233aA1的博客
08-04 713
互联网发展至今，前端工程师以其高需求量和高薪酬成为IT行业职场新贵。 走进现代前端开发行业，播妞发现，每一位前端开发人员都面临着一个重要决策，选择一个合适的框架。 这时，更符合时代大势所趋的前端框架 Vue，以其独有的优势受到开发人员追捧。 盘点黑马程序员超百万播放量的视频，其中有一套便是《4个小时带你快速入门Vue》，115万播放量，4.7万收藏量，获得全网好评。 黑马程序员vue前端基础教程-4个小时带你快速入门vue 当然！这还不够！ 技术在更新，我们也不曾停止脚步 最新前端 Vue 教程来了 内修
【Vue.js】路由基础-动态路由、嵌套路由、编程式导航、重定向
最新发布
LuWeien的博客
03-02 7433
当我们点击outer-link的时候路由就发生改变了，然后就会去路由表里面找对映的是哪个path，找到对应的path就去找对应的组件，将对应的组件放入router-view里面。这里的vue3是通过CDN方式引入, 由于地址在国外可能会比较慢, 可以将代码复制到本地去引入, 注意这个网站有的cdn使用不了(可以往下找使用旧一点版本)这个网站里面有大量的国内镜像资源, cdn是内容分发网络, 可以进入网站直接复制链接浏览器打开将源码复制下来在本地使用, 和vue的本地引入是一样的道理。
Vue-Router 源码分析(三) VueRouter实例的属性和方法
rizon886的博客
07-30 466
我们首先用new VueRouter()创建一个VueRouter实例，之后在创建根Vue实例时把这个VueRouter实例作为router属性传递进去，在这个过程中一般有两种方法可以获取到该VueRouter的实例 第一种是node环境下，我们一般在项目源码的路劲下创建一个router目录，该目录保存所有的路由配置信息，例如: var router = new Router({ routes: [/*略*/] }) router.forEach((to,from,next)=>{ ...
＜router-link＞
LH2HA3的博客
06-29 1729
基本用法
构建vue-router知识体系(三)动态路由基本匹配、简易的 router 实现
发果叁
08-29 737
很多时候我们需要将给定匹配模式的路由映射到同一个组件： 例如，我们可能有一个 User 组件，它应该对所有用户进行渲染，但是用户的 ID 是不同的；在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为 路径参数；router-link 跳转。...
vue引入方式
Lonely_Game的博客
10-11 3233
方式一:script在静态资源公共库引入vue 使用: 方式二:把vue静态资源库的源码复制放在js中通过import引入
黑马头条----首页和登录模块
weixin_63471708的博客
03-08 1496
登录注册 创建 src/views/login/index.vue并配置路由 <template> <div class="login-container">登录页面</div> </template> <script> export default { name: 'LoginPage', components: {}, props: {}, data () { return {} }, compute
vue-router的routes中属性详解
webDevelopSnail的博客
11-08 3177
一、代码展示 const router = new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/', component: () => import('.iews/Index'), name: "home", children: [
vue-router 一些容易被忽略的知识点
七侠剑客的博客
03-09 832
声明：本文转载作为学习自用，如有侵权请联系 本文适用于对 Vue.js 和 vue-router 有一定程度了解的开发者 除特殊说明，vue-router 版本为 3.0.2 正文 路由 class 匹配 <router-link> 路由匹配后会给该标签添加 class 属性值 .router-link-active，该功能在嵌套路由中十分方便 class 的实际属性值可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值