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

最新推荐文章于 2023-03-02 22:07:04 发布

心湖中的石子

最新推荐文章于 2023-03-02 22:07:04 发布

阅读量489

点赞数

分类专栏： Vue

本文链接：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
        },
      ]
    }
  )