动态传参

页面结构

<body>
    <div id="app">
        <h1>路由操作</h1>

        <p>
            接收 query 参数的时候 需要使用 path属性<br />
            接收 params 参数的时候 需要使用 name属性<br />
        </p>

        <!-- 路由渲染组件 -->
        <router-view></router-view>

        <br />

        <!-- 路由跳转组件 -->
        <router-link to="/list">跳转到列表路由(无参数)</router-link>
        <router-link :to="{path:'/list', query:{keyword:123}}">跳转到列表路由(有参数)</router-link>
        <router-link :to="{name:'info', params:{id:100}}">跳转到详细页面路由</router-link>
    </div>
</body>

<script src="./vue.min.js"></script>
<!--要引入路由组件-->
<script src="./vue-router.js"></script>

逻辑结构

//路由组件
const List = { 
    template: `
        <div>
            列表页面
            接收query参数 {{$route.query}}
        </div>
    `
}

const Info = { 
    template: `
        <div>
            详细界面
            接收params参数 {{$route.params}}
        </div>
    `
}

//定义路由列表
const routes = [
    { path: '/list', component: List },
    { path: '/info/:id', component: Info, name: 'info' },
]

//创建路由对象
const router = new VueRouter({
    routes
})

//在全局中加载路由
var app = new Vue({
    el:'#app',
    router
})