vue-router学习心得--创建一个简易的导航

vue-router学习心得–创建一个简易的导航

1.引入vue.js和vue-router.js

vue-router.js在https://unpkg.com/vue-router/dist/vue-router.js中去复制

2.页面部分

        
hello router
        

        
go to content_1
        
content_3
        

        
  


        

            hi boy
            
        
    

router-link这个标签可以用其他东西包起来，同时里面也可用不同的标签
router-view这个标签中不能加东西

3.定义3个组件

const content_1 = { template: '
我是内容1
\
                        
\
                        
' }
const content_2 = { template: '
我是内容2
\
                        
\
                        
'}
const content_3 = { template: '
我是内容3
\
                        
\
                        
'}

4.将组件映射在路由上

 const routes = [
  { path: '/content_1', component: content_1 },
  { path: '/content_2', component: content_2 },
  { path: '/content_3', component: content_3 }

5.创建路由器实例

 const router = new VueRouter({
  routes 
  })

6.挂载到vue实例

const app = new Vue({
  router
}).$mount('#app')

7.完整代码（注意引进vue和vue-router的路径）

    
    
    
    
    
    
    
    
    


    

        
hello router
        

        
go to content_1
        
content_3
        

        
        
        
        

            hi boy