VUE-路由基础

1、创建一个新的项目,添加router。

当没有router的时候是如何引入HelloWorld的呢！

2、在App.vue中的<script></script>添加 引用HelloWorld的代码。

import HelloWorld  from  "./components/HelloWorld"

3、在export default方法中添加方法

components:{ HelloWorld }

4、然后在<template></template>中的div中添加 <HelloWorld></HelloWorld>

这样同样可以添加页面

 

添加router使用HelloWorld

1、安装router

npm install --save vue-router

2、写代码

1、在main.js中引入router

import  VueRouter from "vue-router"

2、创建对象

const router = new VueRouter({
  routes: [
    {
      path: '/hello', 
      component: HelloWorld
    }
  ]
})

3、前提在使用HelloWorld的时候要提前引用

import HelloWorld form "./components/HelloWorld"

4、然后在vue方法中 引用 router。

5、最重要的一步，router在使用前要现使用。

Vue.use(VueRoute)

以上操作都是在main.js中完成。

6、在App.vue中展示HelloWorld。

<router-view></router-view>  这句话大家应该知道放哪里吧！

专业笔记。

1. 引入
  import VueRouter from "vue-router"
  Vue.user(VueRouter)

2.创建Router     
  const router= new VueRouter({
    routes:[
      {
        path:"/hello",
        component:HelloWorld
      }
    ]
  })
3.注入router
  new Vue({
    el:'#app',
    router,
    components:{APP},
    template:'App/'
  })
4.显示路由组件
  <router-view></router-view>