使用params方式传递路由参数-优快云博客

本文链接：https://blog.youkuaiyun.com/wulianlang6162/article/details/99545214

本文介绍如何在Vue项目中使用路由功能，包括引入Vue和Vue-router包，创建路由实例，定义组件和路由规则，以及如何在页面中使用router-link进行导航。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引入包

 <script src="js/vue.js"></script>
          <!-- 引入路由 -->
             <script src="./js/vue-router.js"></script>

创建路由

  // 创建路由
        var routers=new VueRouter({

            routes:[
          
            { path: '/login/:id/:name', component: login},
            { path: '/login', component: login},
            { path: '/regester', component: regester}
            ]
        })

注入vue中

new Vue({
          el:'#app',
          data:{

          },methods: {
              
          },
          router:routers
        })

定义模板对象


//定义模板对象
var login={
    template:'<h1>登录 --拿到路由的值-- {{$route.params.id}}--{{$route.params.name}}-</h1>'
    
}
//定义模板对象
var regester={
    template:'<h1>注册</h1>'
    
}

定义控制区域


    <div id="app">
            <!--router-link 默认渲染a标签，to接地址  tag=“” 可以改变标签，不过也有跳转-->
    <router-link to="/login/1/sff">登录</router-link>
    <router-link to="/regester">注册</router-link>
            <router-view></router-view>
    </div>

案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
             <!--//导入js包-->
             <script src="js/vue.js"></script>
             <!-- Bootstrap -->
             <link href="./bootstrap/dist/css/bootstrap.css" rel="stylesheet">
             <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
             <link href="./css/Animate.css" rel="stylesheet">
             <!-- 引入路由 -->
             <script src="./js/vue-router.js"></script>
</head>
<body>

    <div id="app">
            <!--router-link 默认渲染a标签，to接地址  tag=“” 可以改变标签，不过也有跳转-->
    <router-link to="/login/1/sff">登录</router-link>
    <router-link to="/regester">注册</router-link>
            <router-view></router-view>
    </div>
    <script>

//定义模板对象
var login={
    template:'<h1>登录 --拿到路由的值-- {{$route.params.id}}--{{$route.params.name}}-</h1>'
    
}
//定义模板对象
var regester={
    template:'<h1>注册</h1>'
    
}

        // 创建路由
        var routers=new VueRouter({

            routes:[
          
            { path: '/login/:id/:name', component: login},
            { path: '/login', component: login},
            { path: '/regester', component: regester}
            ]
        })
        
        new Vue({
          el:'#app',
          data:{

          },methods: {
              
          },
          router:routers
        })
        </script>
</body>
</html>