vue 路由

在使用 Vue Router 时，需要先安装并加载 Vue Router 的相关库和插件，然后创建路由对象，配置路由规则，最后将路由对象和 Vue 实例关联。

1.下载router

npm install vue-router

2.创建router.js并编写路由规则

//引入router
import VueRouter from 'vue-router'
//引入所需切换的页面
import inventory from '../page/inventory.vue'

export default new VueRouter({
    routes:[
    {
        path:'/inventory',
        component: inventory
    }]
})

 

3.配置router

在main.js中引入router

//引入router
import vuerouter from 'vue-router'
//使用
Vue.use(vuerouter)
//引入配置的路由
import router from './router/index'


new Vue({
  render: h => h(App),
//配置路由
  router:router
}).$mount('#app')

4.所要显示的区域

a.vue

<!-- //路由跳转链接 -->
    <router-link  to:'/home'> 主页</router-view>
<!-- //路由内容展示 -->
    <router-view></router-view>