传参

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <router-link to='/one'>首页</router-link>
        <router-link to='/two'>用户页</router-link>
        <router-view></router-view>
    </div>
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
    <script>
        var One={
            template:`
                <h1>这是首页</h1>
            `
        }
        var Two={
            template:`
                <div>
                    <h2>这是用户页</h2>
                    <ul>
                        <li>
                            <router-link to='/two/a?uname=jack&upwd=123'>注册</router-link>
                        </li>
                        <li>
                            <router-link to='/two/b/rose/456'>登录</router-link>
                        </li>
                    </ul>
                    <router-view></router-view>
                </div>
            `
        }
        
        var A={
            template:`
                <div>
                    <h3>这是h3</h3>
                    <a href=''>{{$route.query}}</a>
                    <a href=''>uname:{{$route.query.uname}}</a>
                    <a href=''>upwd:{{$route.query.upwd}}</a>
                </div>
            `
        }
        
        var B={
            template:`
                <div>
                    <i>我是倾斜的</i>
                    <a>{{$route.params}}</a>
                    <a>uname:{{$route.params.uname}}</a>
                    <a>upwd:{{$route.params.upwd}}</a>
                </div>
            `
        }
        
        const routes=[
            {path:'/',component:One},
            {path:'/one',component:One},
            {
                path:'/two',
                component:Two,
                children:[
                    {path:'a',component:A},
                    {path:'b/:uname/:upwd',component:B}
                ]
            }
        ]
        
        const router=new VueRouter({
            routes:routes
        })
        
        new Vue({
            el:'#app',
            router:router
        })
    </script>
</body>
</html>

axios

下载：npm install axios
版本
1.0：vue-resource
2.0：axios（相当于库）
Vue中的ajax
ajax作用：前端页面和后台数据做交互
在写是需要有一个.json的文档

axios({
  method:'get'//get post,
  url:'路径'
}).then(function(rext){//请求成功
  console.log(rext.data)
}).catch(function(tex){//请求失败
  console.log(tex)
})

在执行时，需要安装http-server
安装指令：npm install http-server -g
开启一个服务：http-server

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <router-link to='home'>首页</router-link>
        <router-link to='index'>用户页</router-link>
        <router-view></router-view>
    </div>
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
    <script src="js/axios.js"></script>
    <script>
        var Home={
            template:`
                <h1>这是首页</h1>
            `
        }
        
        var Index={
            template:`
                <div>
                    <h1>这是用户页</h1>
                    <table border=1 cellspacing=0>
                        <thead>
                            <tr>
                                <th>编号</th>
                                <th>品名</th>
                                <th>单价</th>
                                <th>数量</th>
                                <th>小计</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="value in list">
                                <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{
                    list:null
                }
            },
            mounted:function(){
                var c=this;
                axios({
                    method:'get',
                    url:'fru.json'
                }).then(function(a){
                    console.log(a.data)
                    c.list=a.data;
                }).catch(function(b){
                    console.log(b)
                })
            }
        }
        
        const routes=[
            {path:'/',component:Home},
            {path:'/home',component:Home},
            {path:'/index',component:Index}
        ]
        
        const router=new VueRouter({
            routes:routes
        })
        
        new Vue({
            el:'#app',
            router:router
        })
    </script>
</body>
</html>
[
    {
        "num":1,
        "pname":"apple",
        "price":2,
        "count":3,
        "sub":6
    },
    {
        "num":1,
        "pname":"apple",
        "price":2,
        "count":3,
        "sub":6
    },
    {
        "num":1,
        "pname":"apple",
        "price":2,
        "count":3,
        "sub":6
    }
]