vue-router

1、在component创建vue文件test.vue   test-child.vue demo01.vue

哪个主文件需要加入路由的，要在div内加入

       <router-view></router-view>

2、在src下创建一个叫myrouter路由文件，再创建一个routers.js

在routers.js中加入从main.js中抽取出来的路由

import Test from "../components/Test"

import HelloWorld from "../components/HelloWorld"

import Demo01 from "../components/Demo01"

import Test_C from "../components/Test-child"

const routes = [

    { path: "/test", component: Test,children:[

            {path:"/test/test_C",component:Test_C}

        ] 

    },

    { path: "/bar", component: HelloWorld },

    {path:"/demo01",component:Demo01},

    {path:"/test_c",component:Test_C},

]

export default routes;//注意一下这个routes是固定的，是上面new的路由实例

//path路径是可以改变自定义的，这是我们浏览器访问的时候的路径

//..是上一级

main中剩下的内容

import Vue from 'vue'

import App from './App.vue'

import VueRouter from 'vue-router'

import routes from './myrouter/myrouters'

Vue.use(VueRouter)

Vue.config.productionTip = false

const router = new VueRouter({

  routes

})

new Vue({

  render: h => h(App),

  router

}).$mount('#app')

 

//注意要把抽取出去的路由引入import routes from './myrouter/myrouters'

3、浏览器访问

http://localhost:8080/#/test/test_C

这就是访问主页面加上test还有test的test-c的

app.vue主页面会和你访问的路由页面结合在一起,这就是vue的主要功能之一

总结:

要增加一个子页面就

创建vue

加入import Demo01 from "../components/Demo01"        和     path:"/demo01",component:Demo01

加    <router-view></router-view>