Vue-Router的基础使用

已于 2023-08-07 16:20:03 修改
阅读量327 收藏
点赞数
文章标签： vue.js javascript 前端
于 2020-06-26 22:57:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41375318/article/details/106966819
版权

V u e − R o u t e r 的基础使用 Vue-Router的基础使用 Vue−Router的基础使用

一 使用CDN

1.使用最新版本

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.js"></script>

视频教程：B站、网易云课堂、腾讯课堂
代码地址：Gitee、Github
存储地址：
百度云-提取码：
Google云

基本使用

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.js"></script>
   <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <title></title>
</head>
<body>
  <div id="app">

    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Major</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active">
              <router-link to="/">
                首页
              </router-link>
            </li>
            <li>
              <router-link to="/page1">
                page1
              </router-link>
             </li>
            <li>
              <router-link to="/page2">
                page2
              </router-link>
           </li>
          </ul>
          

        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

    <div class="container">
        <router-view></router-view>
    </div>

  </div>

  
  <script>
    var index = Vue.extend({template:"<h1>首页</h1>"})
    var page1 = Vue.extend({template:"<h1>page1</h1>"})
    var page2 = Vue.extend({template:"<h1>page2</h1>"})

    let router = new VueRouter({
      routes:[
        {path:"/",component:index},
        {path:"/page1",component:page1},
        {path:"/page2",component:page2},
      ]
    })
    new Vue({
      el:'#app',
      router,
    })
  </script>
</body>
</html>

在这里插入图片描述

动态路由

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.js"></script>
  <title></title>
</head>
<body>
  <div id='app'>
    <ul>
      <li>
        <router-link to="/">首页</router-link>
      </li>
      <li>
        <router-link to="/profile/123">个人中心</router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
  <script>

    let index = Vue.extend({template:"<h1>首页</h1>"})
    let profile = Vue.extend({template:"<h1>个人中心:{{$route.params.userid}}</h1>",
    mounted(){
      console.log(this.$route);
      console.log(this.$router);
    }
    
    })
    let router = new VueRouter({
      routes:[
        {path:"/",component:index},
        {path:"/profile/:userid",component:profile},
      ]
    })

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

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

在这里插入图片描述

组件复用

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.js"></script>
  <title></title>
</head>
<body>
  <div id='app'>
    <ul>
      <li>
        <router-link to="/profile/major_1">major_1个人中心</router-link>
      </li>
      <li>
        <router-link to="/profile/major_2">major_2个人中心</router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
  <script>

    let index = Vue.extend({template:"<h1>首页</h1>"})
    let profile = Vue.extend({template:"<h1>个人中心:{{$route.params.userid}}</h1>",
    mounted(){
      console.log(this.$route.params.userid);
      // console.log(this.$route);
      // console.log(this.$router);
    },

    watch:{   
      "$route":function(to,from){
         console.log("to",to);
         console.log("from",from);
      }
    },

/*     beforeRouteUpdate:function(to,from,next){
       console.log("to",to);
       console.log("from",from);
       next()
    } */
  
    })
    let router = new VueRouter({
      routes:[
        {path:"/",component:index},
        {path:"/profile/:userid",component:profile},
      ]
    })

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

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

在这里插入图片描述

404错误配置

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.js"></script>
  <title></title>
</head>
<body>
  <div id='app'>
    <router-view></router-view>
  </div>
  <script>
    let index= Vue.extend({
      template:"<h1>首页</h1>"
    })
    let aboutus= Vue.extend({
      template:"<p>关于我们</p>"
    })
    let profile= Vue.extend({
      template:"<h1>个人中心：{{$route.params.userid}}</h1>",
      mounted(){
        if(this.$route.params.userid != '123'){
           this.$router.replace("/404")
        }
      },
      watch:{
        "route":function(to,from){
             // 解决复用问题
        }
      }
    })
    let notfound= Vue.extend({
      template:"<h1>404页面没有找到</h1>"


    })

    let router = new  VueRouter({
      routes:[
        {path:"/",component:index},
        {path:"/aboutus",component:aboutus},
        {path:"/profile/:userid",component:profile},
        {path:"/404",component:notfound},

      ]
    }

    )



    new Vue({
      el:'#app',
      router:router
    })
  </script>
</body>
</html>

在这里插入图片描述

路由嵌套（子路由）

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <title></title>
</head>
<body>
  <div id='app'>
    <nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Major_Page</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active">
              <router-link to="/">首页</router-link>
            </li>
            <li><router-link to="/user/123">我的主页</router-link></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
   <div class="container">
     <router-view></router-view>
   </div>

  </div>
  <script>
    let index = Vue.extend({
      template:"<h1>首页</h1>"
    })
    let user = Vue.extend({
      template:`
      <div>
      <h1>我的主页</h1>
      <ul class="nav nav-tabs">
        <li role="presentation" class="active">
        <router-link to="/user/123/setting">设置</router-link>
        </li>
        <li role="presentation">
        <router-link to="/user/123/message">消息</router-link>
        </li>
    
      </ul>
      <div class="container">
     <router-view></router-view>
   </div>
</div>
      
      `
    })

    let user_setting = Vue.extend({
      template:"<h3>个人中心</h3>"
    })
    let user_message = Vue.extend({
      template:"<h3>消息</h3></h3>"
    })
    let router = new VueRouter({
      routes:[
        {path:"/",component:index},
        {
          path:"/user/:userid",
          component:user,
          children:[
          {path:"",component:user_setting},
          {path:"setting",component:user_setting},
          {path:"message",component:user_message},
          ]

          
          
          }
      ]
    })

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

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

在这里插入图片描述

编程式导航

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.js"></script>
  <title></title>
</head>
<body>
  <div id='app'>

    <button @click="gotoPost">帖子列表</button>
    <button @click="gotoProfile">个人中心</button>
    <button @click="gotoLogin">登录</button>
    <button @click="gotoNext">next</button>
    <button @click="gotoPrev">prev</button>
    <router-view></router-view>
  </div>
  <script>
    let post = Vue.extend({
      template:"<h1>帖子列表</h1>"
    })
    let profile = Vue.extend({
      template:"<h1>个人中心:{{$route.params.userid}}</h1>"
    })
    let login = Vue.extend({
      template:"<h1>登录界面:{{$route.query}}</h1>"
    })

    let router =new VueRouter({
      routes:[
        {path:"/post",component:post},
        {path:"/profile/:userid",component:profile,name:"myprofile"},
        {path:"/login",component:login},
      ]
    })
    new Vue({
      el:'#app',
      router,
      methods:{
        gotoPost(){
          this.$router.push("/post")
        },
        gotoProfile(){
          //this.$router.push("/profile/123")
          //this.$router.push({path:"/profile/123"})
          this.$router.push({name:"myprofile",params:{userid:"aaa"}})
        },
        gotoLogin(){
          let currentPath = this.$route.fullPath
          this.$router.push({path:"/login",query:{from:currentPath}})
        },
        gotoNext(){
          this.$router.go(1)

        },
        gotoPrev(){
          this.$router.go(-1)
        }
      }
    })
  </script>
</body>
</html>

在这里插入图片描述

命名视图

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.js"></script>
  <style>
    .header{
      width:100%;
      height:200px;
      background: pink;
    }
    .body{
      display: flex;
      height: 800px;
    }
    .body .sidebar{
      width: 200px;
      background: salmon;
    }
    .body .main{
      flex:1;
      background: blanchedalmond;
    }
    .footer{
      background: gray;
      height: 200px;
    }
  </style>
  <title></title>
</head>
<body>
  <div id='app'>
  <div class="header">
      <router-view name="header"></router-view>
  </div>
  <div class="body">
    <div class="sidebar">
      <router-view name="sidebar"></router-view>
    </div>
    <div class="main">
      <router-view name="main"></router-view>
    </div>
  </div>
  <div class="footer">
    <router-view name="footer"></router-view>
  </div>
  </div>
  <script>
    let headerComponent = Vue.extend({
      template:"<div>header部分</div>"
    })
    let sidebarComponent = Vue.extend({
      template:"<div>sidebar部分</div>"
    })
    let mainComponent = Vue.extend({
      template:"<div>main部分</div>"
    })
    let footerComponent = Vue.extend({
      template:"<div>footer部分</div>"
    })
    let router = new VueRouter({
      routes:[
        {
          path:"/",
          components:{
            header:headerComponent,
            sidebar:sidebarComponent,
            main:mainComponent,
            footer:footerComponent,
          }
        }
      ]
    })

    new Vue({
      el:'#app',
      router,
    })
  </script>
</body>
</html>

在这里插入图片描述

重定向和别名

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.js"></script>
  <title></title>
</head>
<body>
  <div id='app'>
    <router-view></router-view>
  </div>
  <script>
    let index = {template:"<h1>首页</h1>"}
    let article = {template:"<h1>文章列表</h1>"}

    let router = new VueRouter({
      routes:[
        {path:"/",redirect:"/article"},
        {path:"/article",component:article,alias:"/list"}
      ]
    })
    new Vue({
      el:'#app',
      router,
    })
  </script>
</body>
</html>

在这里插入图片描述

全局导航守卫

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.js"></script>
  <title></title>
</head>
<body>
  <div id='app'>
    <router-link to="/">首页</router-link>
    <router-link to="/account">我的账户</router-link>
    <router-link to="/order">我的订单</router-link>
    <router-link to="/login">登录</router-link>
    <router-view></router-view>
  </div>
  <script>
     const logined = false
    let index = {template:"<h1>首页</h1>"}
    let account = {template:"<h1>我的账户</h1>"}
    let order = {template:"<h1>我的订单</h1>"}
    let login = {template:"<h1>登录</h1>"}
    var router = new VueRouter({
      routes:[
        {path:"/",component:index,name:"index"},
        {path:"/account",component:account,name:"account"},
        {path:"/order",component:order,name:"order"},
        {path:"/login",component:login,name:"login"},
      ]
    })
    router.beforeEach(function(to,from,next){
      const authRoutes = ['account','order']
      if(authRoutes.indexOf(to.name)>=0){
                if(!logined){
                  next("/login")
                } else{
                  next()
                }
      }else if(to.name =="login"){

        if(logined){
          next('/')
        }else{
          next()
         }
        }else{
          next()
      }
    })
    router.afterEach(function(to,from){
            console.log("to:",to)
            console.log("from",from)
    })
    new Vue({
      el:'#app',
      router,
      data:{
       
      },
    })
  </script>
</body>
</html>

在这里插入图片描述

路由导航守卫

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.js"></script>
  <title></title>
</head>
<body>
  <div id='app'>
    <router-link to="/">首页</router-link>
    <router-link to="/account">我的账户</router-link>
    <router-link to="/order">我的订单</router-link>
    <router-link to="/login">登录</router-link>
    <router-view></router-view>
  </div>
  <script>
     const logined = false
    let index = {template:"<h1>首页</h1>"}
    let account = {template:"<h1>我的账户</h1>"}
    let order = {template:"<h1>我的订单</h1>"}
    let login = {template:"<h1>登录</h1>"}
    var router = new VueRouter({
      routes:[
        {path:"/",component:index,name:"index"},
        {path:"/account",component:account,name:"account"},
        {path:"/order",component:order,name:"order"},
        {path:"/login",component:login,name:"login",beforeEnter:function(to,from,next){
          if(logined){
            next("/")
          }else{
            next()
          }

        }},
      ]
    })
 
    new Vue({
      el:'#app',
      router,
      data:{
       
      },
    })
  </script>
</body>
</html>

在这里插入图片描述

组件导航守卫

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.js"></script>
  <title></title>
</head>
<body>
  <div id='app'>
    <router-link to="/">首页</router-link>
    <router-link to="/account">我的账户</router-link>
  </div>
  <script>
    let index = {template:"<h1>首页</h1>"}
    let account = {template:"<h1>我的账户</h1>",
    beforeRouteEnter:function(to,from,next){
      console.log("to",to);
      console.log("from",from);
      console.log(this.username);
      next( vm =>{
        console.log('username:',vm.username);
      }
      )
    },
    beforeRouteUpdate:function(to,from,next){
      console.log("to",to);
      console.log("from",from);
      next()
    },
    beforeRouteLeave(to,from,next){
      let answer = window.confirm("您确定要离开这个页面吗？")
      if(answer){
             next()
      }

    }
    }

 var router = new VueRouter({
      routes:[
        {path:"/",component:index,name:"index"},
        {path:"/account",component:account,name:"account"},]}
 )

    new Vue({

      el:'#app',
      router,
      data:{
       
      },
    })
  </script>
</body>
</html>

在这里插入图片描述

*Major*
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
通过cdn引入vue开发_vue-router通过CDN的方式引入怎么使用啊
weixin_32479557的博客
02-12 1944
<!DOCTYPE html><html lang="zh-cn"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content=" width=device-width,user-scalable...
vue路由cdn简单版
m0_69853343的博客
07-08 282
3.在开始跳转的组件设置a标签（<router-link></routert-link>）4.在路由实例中配置router-link标签对应跳转的组件。1.创建一个路由实例（对象）createRouter（）2.创建要跳转结束的相关组件。
【vue-router】Vue路由从创建到使用
叶子yes的博客
09-29 1381
路由可以看成加载组件的另一种方式，使用路由来实现组件之间的跳转。vue-router是vue的一个插件，用来提供路由功能。通过路由的改变可以动态加载组件，达到开发单页面程序的目的。第一步：使用CDN引入vue-router插件 第二步：定义组件 第三步：创建路由对象数组 第四步：创建路由器实例对象 第五步：将路由器对象注入到vue实例中 第六步：使用路由
cdn方式的vue路由使用
qq_41756580的博客
06-14 4399
首先引入cdn: <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script> 引入cdn后便可以...
cdn引入实现vue-router的嵌套路由
求知路上
07-16 941
项目背景 目前的项目是基于若依框架的前后不分离的项目开发的后台管理项目，在此基础上进行迭代开发。 尝试：目前按钮权限是采用<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">的方式进行权限控制的，直接用vue-cli构建一个项目部署的话，按钮的权限无法根据后台设置的角色控制，这个不行； 看了一下若依的文档，然后新的页面的是在vue、vue-ro
vue router elementui template CDN模式实现多个页面跳转
年轻的心跳
03-06 1009
写上一篇bloghttps://blog.csdn.net/jianyuwuyi/article/details/128959803的时候因为整个前端都写在一个index.html页面里，为了写更少的代码还有看起来更简洁做了许多偷懒操作，比如用elementui 的当用，虽然效果上看起来差不多，但是导航菜单功能更强大，也更能体现出CDN模式下vue的router、templete的挂载状态，这样才能更好的学习vue、vue-router，页面较少的项目时还可以用这种方式少写很多代码。当然，也是为了以后用起v
vue写共通头部底部外壳组件
qq_28769891的博客
03-20 653
vue写共通头部底部外壳组件components内添加共通组件Footer.vueHeader.vue合并在同一个页面内AppContainer.vue应用主要引用页面（Main.vue）最终效果 components内添加共通组件 components内添加共通组件Footer.vue和Header.vue，这边举一个例子，将就看一下 Footer.vue <div class=...
vue-taro-router:基本 Taro ，扩展成 vue-router 的使用体验
05-28
VueTaroRouter基本 Taro ，扩展成 vue-router 的使用体验Installationnpm i vue-taro-router -SUsage// router.jsimport VueTaroRouter from "vue-taro-router";const router = new VueTaroRouter();// 添加拦截器...
Vue-Router的使用方法
12-11
使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，于是 vue-router 应运而生。 路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home...
vue-router.js
12-30
vue路由vue-router.js文件下载
vue-router-next：Vue 3官方路由器
02-06
vue-router-next 这是Vue路由器4的存储库（适用于Vue 3）支持Vue路由器Vue Router是Vue生态系统的一部分，是MIT许可的开放源代码项目，其持续的开发完全依靠赞助者的支持而得以实现。 如果您想成为赞助商，请考虑：...
vue-router 中 meta的用法详解
01-21
需要注意的是，当使用<router-view>渲染子路由时，父级路由的meta会作为子路由meta的默认值，这一点在设计路由时尤其需要注意。 最后，由于在题目描述中提供的代码部分存在识别错误和不完整的情况，我们将不会对...
[javascript] cdn模式下vue和vue-router实现路由
程序员老狼专注开发aigc或客服系统应用
09-17 1192
案例大部分都是用npm模式的,现在这个是使用cdn模式的更符合后端开发 html部分 , 注意template标签 ,定义上的id <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.ne...
vue 组件和路由 cdn引入方式的写法。。。。
热门推荐
weixin_43099985的博客
01-09 1万+
组件component的写法有全局写法和局部写法，全局写法在所有vue实例中都可用，局部写在一个vue实例里面 全局写法： &lt;root&gt;&lt;/root&gt; Vue.component('root',{template:'&lt;div&gt;全局全局&lt;/div&gt;'}) 这样我们就把就定义了一歌全局组件,root,直接使用&lt;root&gt;标签调用，...
vue-router的cdn使用，一篇解决百度少有的cdn引用方法
yw99999的博客
06-16 1631
vue-router的cdn使用前端示例代码显示结果 前端示例代码 <div id="app"> <p>$route.name: {{$route.name}}</p> <p>$route.path: {{$route.path}}</p> <p>$route.query: {{$route.query}}</p> </div> <script src="/static/js/vue.js"&
cdn引入vue-router
zyf13671493506的博客
07-12 922
https://www.cnblogs.com/h5it/p/14015604.html
JS：CDN方式引入Vue-Router
彭世瑜的博客
06-15 4378
代码示例 <div id="app"> <p>$route.name: {{$route.name}}</p> <p>$route.path: {{$route.path}}</p> <p>$route.query: {{$route.query}}</p> </div> <script src="/static/js/vue.js"></script> <script
avue-crud 自定义搜索项 插槽
qq_31683775的博客
08-20 322
加上 -search 就可以自定义查询项了。
vue中定义一个url文件,在vue文件中引入
最新发布
weixin_65767506的博客
08-22 275
1.在src/utils文件夹下创建一个url.js。3.在其他vue文件中引入。2.url.js的内容为。4.在挂载时打印一下。打印出来就可以用了.
总结vue-router的使用方法
03-23
Vue-router 是 Vue.js 官方的路由管理器，它和 Vue.js 的核心深度集成，可以非常方便地实现单页应用程序的路由管理。使用 Vue-router，我们可以通过 URL 来访问不同的页面，同时也可以实现页面之间的跳转和传参。 Vue-router 的使用方法如下： 1. 安装 Vue-router：可以通过 npm 或者 yarn 安装 Vue-router。 2. 引入 Vue-router：在项目中引入 Vue-router。 3. 创建路由实例：通过 VueRouter 构造函数创建一个路由实例。 4. 配置路由：在路由实例中配置路由，包括路由路径、组件等。 5. 注册路由实例：在 Vue 实例中注册路由实例。 6. 使用路由：在组件中使用路由，包括路由跳转、传参等。 总之，Vue-router 是一个非常强大的路由管理器，可以帮助我们实现单页应用程序的路由管理，提高开发效率和用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值