【使用组件】

非路由组件

-components文件夹：经常放置的非路由组件（共用全局组件）

使用组件的步骤（非路由组件）

．创建或者定义
．引入，在需要使用的文件中引入
import CommonAside from '@/components/CommonAside.vue'
．注册，components里面注册被引入的组件

 components: { CommonAside, CommonHeader , CommonTag},

· 使用<CommonAside />

路由组件

-pages|views文件夹：经常放置路由组件

使用组件的步骤（路由组件）

在vue的应用的入口文件，main.js中，导入Vue和Vue Router，并配置他。

配置路由：

Vue.use(VueRouter)

//将路由与组件映射
const routes = [
  //主路由
  {
    path: '/',
    component: Main,
    redirect: '/home',
    //子路由
    children: [
      { path: '/home', name: 'home', component: Home }, //首页
      { path: '/user', name: 'user', component: User }, //用户管理
      { path: '/mall', name: 'mall', component: Mall }, //
      { path: '/page1', name: 'page1', component: PageOne },
      { path: '/page2', name: 'page2', component: PageTwo }
    ]
  },
  //注意，注册与登录放在另外的对象里面
   {
    // 注意路径要有/
    path: '/login',
    component: Login,
    name: 'login'
  },
  {
    // 注意路径要有/
    path: '/register',
    component: Register,
    name: 'register'
  }
]
//创建router实例
const router = new VueRouter({
  routes // short for `routes: routes`
})

export default router

注意，注册与登录放在另外的对象里面

两者区别

• 路由组件一般需要在router文件夹中进行注册（使用的即为组件的名字）
• 非路由组件在使用的时候，一般都是以标签的形式使用
• 注册完路由，不管路由路由组件、还是非路由组件身上都有$route、$route属性

$route $router

• $route：一般获取路由信息(路径、query、params等等)
• $router:一般进行编程式导航进行路由跳转(push l replace)

声明式导航能做的，编程式导航都能，但是编程式导航除了可以进行路由跳转，还可以做一些其他的业务逻辑。