精华内容
下载资源
问答
  • vue子路由使用方法

    2021-07-02 16:46:28
    1.在某一子组件中添加进入子路由 2.在有子路由的组件路由配置中添加children字段,children是一个数组,成员是对象。对象格式{path:’’,component:组件对象名}(children中的path是不带’/'的) <!DOCTYPE ...

    1.在某一子组件中添加进入子路由

    2.在有子路由的组件路由配置中添加children字段,children是一个数组,成员是对象。对象格式{path:’’,component:组件对象名}(children中的path是不带’/'的)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="./vue.js"></script>
        <script src="./vue-router.js"></script>
        <style>
            *{
               padding: 0;
               margin: 0;
            }
        </style>
    </head>
    <body>
        <div id="app">
        <router-link to="/account">进入路由组件</router-link>
        <router-link to="/newlist">进入新闻列表组件</router-link>
        <router-view></router-view>
    
        </div>
    </body>
    <script type="text/javascript">
    const account = {
        template:`
        <div>
            <h1>hello</h1>
        <router-link to="/account/login">进入登录子组件</router-link> 
        <router-view></router-view>
        </div>
      `
        
       
    }
    //组件html元素多余一个必须加一层div
    const newlist = {
        template:
        `
        <div>
            <h1>新闻列表</h1>
        
        </div>
        `
    }
    const login = {
        template:`<h1>Login</h1>`
    }
    const router = new VueRouter({
        routes:[{
            path:'/account',
            component:account,
            children:[{path:'login',component:login}]
        },
        {
            path:'/newlist',
            component:newlist,
            
        },
        // {
        //     path:'/account/login',
        //     component:login
    
        // }
    
        
    ]
        
        
    })
    
          var app = new Vue({
              el:"#app",
              data:{
                  msg:'11'
              },
              methods:{
    
              },
            router:router
    
          })
    
    
    
    
    </script>
    </html>
    
    展开全文
  • #父路由页面# <template> <div style="height: 100%"> <!-- 路由占位符 --> <router-view @update="getRightList()" /> </div> </template> <script> export ...

    #父路由页面#

    <template>
      <div style="height: 100%">
      	 <!-- 路由占位符 -->
         <router-view @update="getRightList()" />
      </div>
    </template>
    <script>
    export default {
      name: "Home",
      data() {
      	return {
      	}
      },
      methods: {
        // 获取权限数据
        getRightList(data) {
          console.log("45465456");
        },
      },
    }
    <script>
    

    #子路由页面#

    let _that = this;
    _that.$emit("update");
    
    展开全文
  • 1.第一种: 根路径访问:[http://localhost:8080/#/welcome] 2.第二种: 通过父级路径访问:[http://localhost:8080/#/home/welcome]

    1.第一种:
    根路径访问:http://localhost:8080/#/welcome

    ...
    const router = new Router({
      routes: [
        {
          path: '/home',
          component: Home,
          redirect: '/welcome',  //http://localhost:8080/#/welcome
          children: [{
            path: '/welcome',
            component: Welcome
          }, 
       }
    ...
    

    2.第二种:
    通过父级路径访问:http://localhost:8080/#/home/welcome

    ...
    const router = new Router({
      routes: [
        {
          path: '/home',
          component: Home,
          redirect: '/home/welcome',  //http://localhost:8080/#/home/welcome
          children: [{
            path: 'welcome',
            component: Welcome
          }, 
       }
    ...
    
    展开全文
  • 直接在子路由的范围内使用this.$parent.xx即可调用对应父亲路由的参数。 使用this.$parent.xx()即可调用对应父亲路由的方法。 具体实现:直接贴入自己的测试页面就能看见效果了. <div id="app"> <router-...

    问题:Vue中子路由怎么去调用父路由的方法和参数

    思路:

    • 直接在子路由的范围内使用this.$parent.xx即可调用对应父亲路由的参数。
    • 使用this.$parent.xx()即可调用对应父亲路由的方法。

    具体实现:直接贴入自己的测试页面就能看见效果了.

    <div id="app">
        <router-link to="/son" tag="div"></router-link>
        <router-view></router-view>
    </div>
    <template id="son">
        <div>
            <button v-on:click="sonClick">触发父亲的方法</button>
        </div>
    </template>
    <script type="text/javascript">
        var son={
            template: '#son',
            methods: {
                sonClick : function(){
                    /*
                    	这里直接把两种写法都明确表示出来了
                    */
                    this.$parent.fatherClick(this.$parent.parentParam);
                }
            }
        };
        var router=new VueRouter({
            routes:[
                {path:'/',redirect:'/son'},
                {path:'/son',component:son}
            ]
        });
        var vm=new Vue({
            el:'#app',
            data:{
                parentParam:"父亲的参数"
            },
            methods:{
                fatherClick(msg) {
                    alert("这是父亲的方法,被触发了.传入的参数为" + msg);
                }
            },
            router:router
        });
    </script>
    
    展开全文
  • 页面返回写法 this.$router.push({ path: "/",//上级页面的路径 query: { key: this.$route.query.id }//传到父级的值。 }); //父页面 //在watch中监听值的变化 watch: { $route(to, from) { //监听路由...
  • vue子路由路径写/和不写/的差别 路由的配置 子路由写/的时候代表是绝对路径 跳转的时候直接在跟路径下跟上子路由 不写/的时候 会进行拼接 在原有路径上跟上新的path路径 如果父路由是/ 的时候 子路由写不写/都...
  • Vue 父路由和子路由

    2021-03-01 19:32:28
    Vue 父路由和子路由 以黑马项目二leyou商城的前端界面为例 我们在访问localhost:9001时候首先会进入index.html和读取main.js main.js里面包含了new Vue({}),我们看一下里面参数:router。 router是路由,负责把...
  • vue子路由的一个坑

    2021-01-03 02:09:02
    路由信息如下 下面是错误的路由 export default new VueRouter({ routes: [ { path: '/', children: [ { path: 'login', component: Login } ] } ]
  • 父路由调用子路 合理运用ref属性 <template> <div> <router-view ref="Childmain"/> </div> </template>...调用时可能会出现报错,没猜错的话报错原因是子路由还未加载,这
  • 展开全部在vue-router中 active-class 只在选中的路由上添加active-class,并不会对其关联的路由链接添加active-class[{path:'/messageCenters',component:()=>System.import('./personalcenter/MessageCenter....
  • 一、在子路由前面加上父路由路径{path: "/foundMusic",component: FoundMusic,children: [{ path: "/foundMusic/newdisc", component: NewDisc },{ path: "/foundMusic/radio", component: Radio },{ path: "/...
  • 现在很多的后台管理系统都采用tab选项卡的布局,左边是导航栏固定,右边是对应的页面,每次点击左边的导航标题,只有右面的对应页面再切换,而vue要做tab选项卡,推荐使用<router-link></router-link>...
  • 定义子路由 //router.js import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: resolve=>...
  • Vue父路由调用子路由中的方法

    千次阅读 2021-01-07 13:31:14
    问题:vue如何在父路由中调用子路由的方法 思路: 由父路由emit信号给子路由子路由接收对应信号 子路根据信号规则去使用自己的相应的方法 具体实现:有需要的可以直接粘贴到测试页面,就可以看见效果了。 <div ...
  • 继续上文中我们完成了一个由pageone和pagetwo的路由搭建 具体的上文请打开https://blog.csdn.net/wangzhen12138/article/details/119250222查看 如图上所示那么我们将在页面二中创造出三个子页面,方法如下 ...
  • 歌手组件是获取一个歌手列表,点击歌手跳转到子路由,歌手的所有歌曲singer-detail组件,singer-detail组件内引用了一个music-list组件,music-list组件包括一个标题栏和一个song-list组件,song-list组件是是该歌手...
  • 配置父子路由关系,A.vue和B.vue是Main.vue组件:{path: '/main/',name: 'main',component: () => import('components/Main.vue'),children: [{path: 'a',name: 'a',component: () => import('components/A...
  • 一、配置 Router用 vue-cli 创建的初始模板里面,并没有 vue-router,需要通过 npm 安装cnpm i vue-router -D安装完成后,在 src 文件夹下,创建一个 routers.js 文件,和 main.js 平级然后在 router.js 中引入所需...
  • App.vue一般这样写,这里是跟路由。想象一块大的屏幕,根路径的切换就是这个...router.js坑一:在子路由加了斜杠/,导致跳转空白不显示 routes: [ { path: '/', redirect: Home }, { path: '/login', component: Lo
  • 在实际开发中,嵌套路由常常会用到,基本用法也很简单,今天遇到了当前路由下(父路由)在点击它的子路由时,他的(父路由)选中状态消失了javascript缘由是:html1.子路由router-link加了exac精确匹配路由vue2....
  • 路由嵌套与重定向 index.js import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../view/Home' // import About from '../view/About' import User from '../view/User' const New = ()=...
  • 直接在子路由的范围内使用this.$parent.xx即可调用对应父亲路由的参数。 使用this.$parent.xx()即可调用对应父亲路由的方法 二、测试代码: 父页面: <template> <div class="parent-demo"> <...
  • Nginx服务器下VUE history模式子路由刷新404的问题环境、情况解决办法 环境、情况 我是使用宝塔面板生成的服务器,默认的Nginx。 由于遇到了这个在子路由刷新就404的问题,故此我就开始了漫长的百度中。网上的答案...
  • 原因:注册动态路由时,往main中添加子路由,但是没有给main映射添加名字。所以浏览器控制台查看组件会发现,点击商品统计,会挂载新的app组件。丢失侧边,头部内容。 解决:给main映射添加名字 ...
  • 在嵌套路由中,父路由向子路由传值除了query外,还有params,params传值有两种情况,一种是值在url中显示,另一种是值不显示在url中。1、显示在url中index.htmlmain.js params传值是通过:[参数值] 如path:"/home/...
  • vue子路由问题之/

    2021-11-30 10:33:37
    vue路由问题中需要特别注意 / 的含义
  • 1.子路由中的name属性和父路由中的name属性不可以同时出现 2.使用children属性实现子路由时,子路由path前面 不能带/,以/ 开头的嵌套路径会被当作根路径,否则会永远以根路由开始请求, 这样不方便我们调用渲染数据 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 31,031
精华内容 12,412
关键字:

vue的子路由

vue 订阅