引入包
 <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>
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue