zoukankan      html  css  js  c++  java
  • Vue路由

    https://router.vuejs.org/


    vue路由配置:

    1.安装

    npm install vue-router --save / cnpm install vue-router --save

    2、引入并 Vue.use(VueRouter) (main.js)

    import VueRouter from 'vue-router'
    
    Vue.use(VueRouter)

    3、配置路由

    1.创建组件 引入组件

    2.定义路由 (建议复制)

    const routes = [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar },
    { path: '*', redirect: '/home' } /*默认跳转路由*/
    ]

    3.实例化VueRouter

    const router = new VueRouter({
    routes // (缩写)相当于 routes: routes
    })

    4.挂载

    new Vue({
    el: '#app',
    router,
    render: h => h(App)
    })

    5.根组件的模板里面放上这句话 <router-view></router-view> 


    6.路由跳转

    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>

    将router配置提取到src outerindex.js中

    index.js:

    import Vue from 'vue'
    import Router from 'vue-router'
    import Home1 from "@/components/Home1";
    import New1 from "@/components/New1";
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {path:'/home', name: 'Home',component: Home1},
        {path:'/new',component: New1},
        {path:'/',redirect:'/home'}
      ]
    })

    main.js:

    import Vue from 'vue'
    import router from './router'
    import MyApp2 from './MyApp2'
    
    new Vue({
      el: '#app',
      router,
      render: h => h(MyApp2)
    })

     动态路由:

    export default new Router({
      routes: [
        {path:'/home', name: 'Home',component: Home2},
        {path:'/new',component: New2},
        {path:'/content/:id',component: Content},//动态路径参数 以冒号开头
        {path:'/pcontent',component: Pcontent},
        {path:'/',redirect:'/home'}
      ]
    })

    获取路径:

    <template>
        <div>
          New组件
          <ul>
            <li v-for="i in 5">
              <router-link to="/content/123">News</router-link>
            </li>
            <hr>
            <li v-for="i in 5">
              <router-link :to="'/content/'+i">News {{i}}</router-link>
            </li>
          </ul>
    
        </div>
    </template>
    this.$route.params
     mounted() {
                console.log(this.$route.params)//{id: "5"}
            }

    获取get传值:

    <template>
        <div>
          Home2组件
          <ul>
            <li v-for="i in 5">
              <router-link :to="'/pcontent?pid='+i">列表{{i}}</router-link>
            </li>
          </ul>
        </div>
    </template>

    this.$route.query

    mounted() {
                // 获取get传值
                console.log(this.$route.query)//{pid: "1"}
            }

    编程式的导航

      routes: [
        {path:'/home', name: 'Home',component: Home2},
        {path:'/new',component: New3,name:'New'},
        {path:'/content/:id',component: Content,name:'Content'},//动态路径参数 以冒号开头
        {path:'/pcontent',component: Pcontent,name:'Pcontent'},
        {path:'/',redirect:'/home'}
      ]
    methods:{
                toNew1(){
                    this.$router.push({path:'pcontent'})
                },
                toNew11(){
                    this.$router.push({name:'Pcontent'})
                },
                toNew2(){
                    this.$router.push({path:'/content/495'})
                },
                toNew22(){
                    this.$router.push({name:'Content',params:{id:495}})
                },
            }

    路由的嵌套

    1.配置路由

        {
          path:'/user',
          component:User,
          children:[
            {path:'userAdd',component: UserAdd},
            {path:'userList',component: UserList},
          ]
        }

    2.父路由里面配置子路由显示的地方 <router-view></router-view>

    <router-link to="/user/userAdd">User</router-link>
    <template>
      <div id="user">
        <div class="user">
          <div class="left">
            <ul>
              <li>
                <router-link to="/user/userAdd"> 增加用户</router-link>
              </li>
              <li>
                <router-link to="/user/userList"> 用户列表</router-link>
              </li>
            </ul>
          </div>
          <div class="right">
            <router-view></router-view>
          </div>
        </div>
      </div>
    </template>
    
    <script>
        export default {
            name: "User"
        }
    </script>
    
    
    <style lang="scss" scoped>
      .user{
        display:flex;
        .left{
          width:200px;
          min-height:400px;
          border-right:1px solid #eee;
          li{
            line-height:2;
          }
        }
        .right{
          flex:1;
        }
      }
    </style>
  • 相关阅读:
    Drozer渗透测试工具(使用篇)
    Teamcenter中TCComponentItem与TCComponentBOMLine的创建
    Swing中分割面板JSplitPane的使用
    Swing中菜单栏JToolBar的使用
    Javaweb项目导出成jar包并使用Windows定时任务定时执行
    TCSOA获取BOMLine
    SQLite Expert安装与注册
    获取分类节点
    处理TC的Command问题
    通过TCComponentBomLine获取ItemRevision的两种情况
  • 原文地址:https://www.cnblogs.com/fly-book/p/11957242.html
Copyright © 2011-2022 走看看