<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-router之rewrite模式下配置404页面</title>
    <script src="vue.js"></script>
    <script src="node_modules/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="demo">
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于我们</router-link>
    <router-view></router-view>
</div>
<script type="text/x-template" id="home">
    <div>
        <li v-for="v in news">

            <a href="#" @click.prevent="go(v.id)">{{v.title}}</a>
        </li>
    </div>
</script>
<script type="text/x-template" id="content">
    <div>
        <h1>{{field.title}}--{{field.id}}</h1>
        <p>
            {{field.content}}
        </p>
        <a href="" @click.prevent="back()">返回首页</a>
    </div>
</script>
<script>
    const notFound={
        template:'<h1>NotFound</h1>'
    }
    var data = [
        {id: 1, title: "php课程", content: "php是个比较牛的技术"},
        {id: 2, title: "java课程", content: "java是个比较牛的技术"},
        {id: 3, title: "pathon课程", content: "pathon是个比较牛的技术"}
    ]
    const home = {
        template: "#home",
        data() {
            return {
                news: data
            }
        },
        methods:{
            go(id){
                //var url='/content/'+id; //url第一种写法
                //var url={name:'content',params:{id:id}};//url第二种写法
                //this.$router.replace(url);//replace()替换历史记录中的跳转：

                var url={'path':'/content/'+id};//跳转到详情页  //url第三种写法
                this.$router.push(url);
            }
        }
    }
    const content = {
        template: "#content",
        data() {
            return {
                field: {}
            }
        },
        mounted() {
            var id = this.$route.params.id;
            for (let k = 0; k < data.length; k++) {
                if (data[k].id == id) {
                    this.field = data[k];
                }
            }
        },
        methods:{
            back(){
                this.$router.go(-1);
            }
        }
    }
    let routes = [
        {path: '/', component: home},
        {path: '/content/:id', component: content, name: "content"},
        {path: '/content/3',alias:['/about']},
        {path:'*',component:notFound}

    ];
    //把组件交给路由器：
    let router = new VueRouter({routes});
    new Vue({
        el: "#demo",
        router
    });
</script>
</body>
</html>