2018-09-25vue.router路由和路由的嵌套、路由的

作者: 梁萌0328 | 来源:发表于2018-09-25 15:33 被阅读0次

2018-09-25vue.router路由和路由的嵌套、路由的
vue嵌套路由
vue-路由
vue嵌套路由与404重定向实现方法分析
vue中的路由
vue-routes 基础（一）
动态路由 & 嵌套路由实例
vue路由的介绍（四）--嵌套路由
Vue嵌套路由和路由守卫
路由vue router

一、路由

路由：vue-router 带三方工具库
创建单页面应用 spa (single page application)
通过不同的URL访问不同的页面
下载：

        npm install vue
       
       npm install vue-router

body部分：

 <div id="itany">
   <!-- 1.-->
   <router-link to='/index'>首页</router-link>
   <router-link to='/detail'>详情页</router-link>
   <router-link to='/about'>关于我们</router-link>
 <!-- 盛放导航对应的内容-->
  <router-view></router-view>

js部分：

<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
   //  2.创建组件
    var Index={
        template:`
            <h1>这是首页</h1>
        `
    }
    
    var Detail={
        template:`
            <h1>这是详情页</h1>
        `
    }
    
    var About={
        template:`
            <h1>这是关于我们</h1>
        `
    }
    
    
   // 3.配置路由
    const routes=[
        {path:'/',component:Index},
        {path:'/index',component:Index},
        {path:'/detail',component:Detail},
        {path:'/about',component:About}
    ]
    
    
  // 4.创建一个路由实例
    
    const router=new VueRouter({
        routes:routes,
        linkActiveClass:'active'
    })
    
    
   // 5.把路由实例挂载到vue实例上
    
    new Vue({
        el:"#itany",
        router:router
    })
</script>

路由.png

二、路由的嵌套

body部分：

<div id="itany">
   <router-link to='/index'>首页</router-link>
   <router-link to='/user'>用户页</router-link>
   <router-view></router-view>
</div>

js部分：

<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
//  2.创建组件
    var Index={
        template:`
            <h1>这是首页</h1>
        `
    }
    var User={
        template:`
            <div>
                <h1>这是用户页</h1>
                <ul>
                     <li><router-link to='/user/regist'>这是注册页面</router-link></li>
                    <li><router-link to='/user/login'>这是登录页面</router-link></li>
                </ul>
                <router-view></router-view>
            </div>
        `
    }
    var Regist={
        template:`
            <h3>注册页面</h3>
        `
    }
    var Login={
        template:`
            <h3>登录页面</h3>
    `
    }
//   3.配置路由
    const routes=[
        {path:'/',component:Index},
        {path:'/index',component:Index},
        {
            path:'/user',
            component:User,
            children:[
                {path:'regist',component:Regist},
                {path:'login',component:Login}
            ]
        }
    ]
//  4.创建路由实例
    const router=new VueRouter({
        routes:routes
    })
    new Vue({
        el:"#itany",
        router:router
    })
</script>

路由的嵌套.png

三、路由的传参
路由的传参：
查询字符串：
/user/regist?uname=jack&&upwd=123
接收：{{ $route.query}} rest风格传参 /user/login/rose/456 接收： {{$ route.params}}
-->

body部分：

 <div id="itany">
   <router-link to='/index'>首页</router-link>
   <router-link to='/user'>用户页</router-link>
   <router-view></router-view>
 </div>

js部分：

<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
// 2.创建组件
    var Index={
        template:`
            <h1>这是首页</h1>
        `
    }
    var User={
        template:`
            <div>
                <h1>这是用户页</h1>
                <ul>
                     <li>
                           <router-link to='/user/regist?uname=jack&upwd=123'>这是注册页面
                          </router-link>
                     </li>
                    <li><router-link to='/user/login/rose/456'>这是登录页面</router-link></li>
                </ul>
                <router-view></router-view>
            </div>
        `
    }
  //  字符串传参 /user/regist?uname=jack&upwd=123
   //  接收       {{$route.query}}
    
  // rest传参   /user/login/rose/456   
 //  配置路由：{path:'login/:userName/:password',component:Login}
// 接收：{{$route.params}}
    
    var Regist={
        template:`
            <div>
                <h3>注册页面</h3>
                <a href="#">{{$route.query}}</a>
                <ul>
                    <li>{{$route.query.uname}}</li>
                    <li>{{$route.query.upwd}}</li>
                </ul>
            </div>
        `
    }
    var Login={
        template:`
            <div>
                <h3>登录页面</h3>
                <a href="#">{{$route.params}}</a>
                <ul>
                    <li>{{$route.params.userName}}</li>
                    <li>{{$route.params.password}}</li>
                </ul>
            </div>
    `
    }
    //  3.配置路由
    const routes=[
        {path:'/',component:Index},
        {path:'/index',component:Index},
        {
            path:'/user',
            component:User,
            children:[
                {path:'regist',component:Regist},
                {path:'login/:userName/:password',component:Login}
            ]
        }
    ]
 //4.创建路由实例
    const router=new VueRouter({
        routes:routes,
        linkActiveClass:'active'
    })
    new Vue({
        el:"#itany",
        router:router
    })
</script>

效果图：

路由的传参.png

四、vue中的ajax (axios)

vue中的ajax 插件
下载axios:
npm install axios
1.0 vue-resource
2.0 axios

 安装http-server
     npm install http-server -g   
         
 使用http-server 开启一个服务器

body部分：

<div id='app'>
 <!--1.-->
   <router-link to='/index'>首页</router-link>
   <router-link to='/detail'>详情页</router-link>
    <!--盛放导航对应的内容-->
   <router-view></router-view>
</div>

js部分：

<script src='js/vue.js'></script>
<script src='js/vue-router.js'></script>
<script src='js/axios.js'></script>
<script>
   //2. 创建组件
    var Index={
        template:`
           <h1>这是首页</h1>
         `
    }
    
    var Detail={
        template:`
         <div>
          <h1>我是详情页</h1>
           <table border=1 cellspacing=0>
            <thead>
                <tr>
                   <td>编号</td>
                   <td>品名</td>
                   <td>单价</td>
                   <td>数量</td>
                   <td>小计</td>
                </tr>
            </thead>
            <tbody>
               <tr v-for="value in fruList">
                   <td>{{value.num}}</td>
                   <td>{{value.pname}}</td>
                   <td>{{value.price}}</td>
                   <td>{{value.count}}</td>
                   <td>{{value.sub}}</td>
               </tr>
            </tbody>
           </table>
         </div>
         `,
        data:function(){
            return{
                fruList:null
            }
        },
        mounted:function(){
            var self=this;
            axios({
                method:'get',//发送数据的方式
                url:'fruit.json'
            }).then(function(resp){//请求成功
    //  console.log(resp)
                console.log(resp.data)
                 self.fruList=resp.data
            }).catch(function(err){//请求失败
                console.log(err)
            })
        }
    }
    
    //3.配置路由
    
    const routes=[
        {path:'/',component:Index},
        {path:'/index',component:Index},
        {path:'/detail',component:Detail}
    ]
    
    //4.创建一个路由实例
    const router=new VueRouter({
        routes:routes,
        linkActiveClass:"active"
    })
    //5.把路由实例挂在到vue实例上 
   new Vue({
       el:'#app',
       router:router
   })
   
</script>

json部分：

  [
     {
    "num":1,
    "pname":"apple",
    "price":3,
    "count":4,
    "sub":12
},
{
    "num":2,
    "pname":"pear",
    "price":4,
    "count":5,
    "sub":20
},
 {
     "num":3,
    "pname":"orange",
    "price":5,
    "count":6,
    "sub":30
  }
]

链接网址：
http://192.168.1.108:8080
http://127.0.0.1:8080

效果图：

axios.png

2018-09-25vue.router路由和路由的嵌套、路由的
一、路由路由：vue-router 带三方工具库创建单页面应用 spa (single page appli...
vue嵌套路由
嵌套路由定义：路由中嵌套子路由，子路由中关键属性children例：页面上路由中
vue-路由
需要掌握：路由map路由视图路由导航路由参数的配置嵌套路由的使用命名路由和命名视图重定向 router/in...
vue嵌套路由与404重定向实现方法分析
第一部分： vue嵌套路由嵌套路由是什么？嵌套路由就是在一个被路由过来的页面下可以继续使用路由，嵌套也就是路由...
vue中的路由
vue中4中路由包含： 1、动态路由2、嵌套路由3、编程式路由4、命名式路由 1、动态路由 2、嵌套路由 3、编程...
vue-routes 基础（一）
路由常用技巧更新：2020-12-25 获取当前路由路由监听（路由地址变化时才执行）嵌套路由嵌套路由其实就...
动态路由 & 嵌套路由实例
1.动态路由注意：动态路由以‘：’开头。$route 参数表见 “ 动态路由 & 嵌套路由 ” 2.嵌套路由注...
vue路由的介绍（四）--嵌套路由
嵌套路由简单的理解就是在路由中在嵌套一层路由。具体的做法是： 1，配置路由 2，父路由里面配置子路由显示的地方...
Vue嵌套路由和路由守卫
嵌套路由路由守卫
路由vue router
路由的五个步骤路由的嵌套路由的传参