第二章 两种传递参数方式

//传参
const news = {
    template: `
    <div>
    <h1>新闻列表</h1>
    <ul>
    <li>
     <router-link to="/news/001?age=12"> 新闻001</router-link>
    </li>
    <li>
     <router-link to="/news/002?age=不知道"> 新闻002</router-link>
    </li>
    </ul>
    </div>
    `
};
// 参数传递$route.params.[name]
const NewsDetail={template:
    `
    <div>
    新闻详细页面:
    <span>{{$route.params.id}}</span>
    <br />
    ?(query)传递参数
    <span>{{$route.query.age}}</span>
    </div>
    `};
//01 定义路由
const routes = [{
    path: ‘/‘,
    component: { template: ‘<div>欢迎来到首页</div>‘ }

}, {
    path: ‘/news‘,
    component: news
}, {
    path: ‘/news/:id‘,
    component: NewsDetail
}, ];
//02 实例路由
const router = new VueRouter({ routes });

//03 实例vue
const vue = new Vue({
    el: "#app",
    router
})

    <div id="app">
        <p>
            <router-link to="/">首页</router-link>
            <router-link to="/news">news</router-link>
        </p>
        <router-view></router-view>
    </div>