Vuejs入门之四 路由(vue-router)

基础使用

1 安装路由插件:npm install vue-router --save
2 在主入口js文件中引入包:import VueRouter from 'vue-router'
3 创建路由对象:

// 安装路由插件
Vue.use(VueRouter)

// 创建路由对象
let router = new VueRouter({
    routes: [
        { path: '/', component: Home }
    ]
})

4 创建路由对象时在options中配置router属性:

new Vue({
    el: '#app',
    render: function (create) {
        return create(App)
    },
    router: router
})

5 使用router-view标签留下要渲染的内容的位置:<router-view></router-view>

命名路由

1 路由规则中添加如下规则{ name:'about',path: '/about', component: About }
2 使用如下方式跳转到name为about的路由:
<router-link :to="{name:'about'}">about me</router-link>

参数传递

参考链接

免责声明

以上内容若侵犯了您的版权，请联系我，我会立即删除。
以上内容有不对的地方敬请指正！