zoukankan      html  css  js  c++  java
  • vuerouter-6_路由杂项

    1.重定向

    2.404

    3.mode:"history"

    4.this.$route.path

    实例-------------------------------------------------------

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    //@表示寻找根目录
    import HelloWorld from '@/components/HelloWorld'
    import learn from '@/components/learn'
    import Basee from '@/components/basee'
    import Http from '@/components/http'
    import NotFound from '@/components/404'

    Vue.use(VueRouter)
    //创建路由
    export default new VueRouter({
    //mode:'history',
    routes: [{
    path: "/h/:id",
    name: "HelloWorld", //可以作为跳转使用
    component: HelloWorld
    },
    {
    path: "/learn/:id",
    name: "learn",
    component: learn,
    children: [{
    path: "basee",
    component: Basee
    },
    {
    path: "http",
    component: Http
    }
    ]
    },
    {
    path:"/",
    //重定向
    redirect:"/learn"
    },
    {
    path:"*",
    //404
    component:NotFound
    }
    ]
    })

    实例---------------------------------------------------------------------------------

    <template>
    <div class="learn">learn
    {{this.$route.params.id}}
    <ul>
    <router-link to="/learn/basee" tag="li">基本学习</router-link>
    <router-link to="/learn/http" tag="li">网络学习</router-link>
    </ul>
    <router-view />
    <p>{{getUrl}}</p>
    </div>
    </template>

    <script>
    export default {
    name:"learn",
    data(){
    return{

    }
    },
    computed:{
    getUrl(){
    return this.$route.path;
    }
    }
    }
    </script>

    <style lang="css" scoped>
    </style>

  • 相关阅读:
    模板
    常用文件的位置
    前端基础之JavaScript
    CSS属性相关
    前端之CSS
    jQuery方法及使用
    前端-HTLM
    前端之BOM与DOM-JQuery
    视图-触发器-事务-存储过程-函数
    Navicat-pymysql-sql注入问题
  • 原文地址:https://www.cnblogs.com/xiao-peng-ji/p/11336904.html
Copyright © 2011-2022 走看看