Vue2 vue-router安装和配置的步骤-基本路由

一.安装 vue-router 包

npm i vue-router -S

二.创建路由模块 src/router/index.js 或 src/pages/index.js

//1.导入vue 和 vuerouter 的包
import Vue from 'vue'
import VueRouter from 'vue-router'

//2.调用vue.use() 函数，把 VueRouter 安装为 Vue 的插件
//vue.use()函数的作用，就是来安装插件的
Vue.use(VueRouter)

//3.创建路由的实例对象
const router = new VueRouter()

//4.向外共享路由的实例对象
export default router

三.导入并挂载路由模块

//在 vue 项目中，要想把路由用起来，必须把路由实例对象，通过下面的方式进行挂载

//1.在 main.js 中导入路由模块
import router from '@/router/index.js'


new Vue({
render: h => h(App),

//router:路由的实例对象
//router: router 属性值和名相同可以简写
router

}).$mount('#app')

四.声明路由连接和占位符

1.占位符：<router-view> </router-view>

a.想在哪组件展示组件，就把<router-view> </router-view>放在哪里

b.并用 <router-link> </router-link> 绑定好要展示组件的地址   

例如：<router-link to='/home'> </router-link>

//<router-link to='/home'> </router-link> 和 a 连接有点相似

2.路由连接：在路由模块router/index.js里面配置

//回头看第二步里的第3小步 =>  const router = new VueRouter()

const router = new VueRouter({

//routes 是一个数组，作用定义"hash 地址" 与 "组件" 之间的对应关系

routes:[
//重定向路由规则,防止用户进入空白页面
{path: '/' , redirect:'/Home'}

//路由规则

//{ path: '/home' , component:'要展示的组件'}，
{ path: '/home' , component:'Home'}，

{ path: '/movie' , component:'Movie'},

{ path: '/about' , component:'About'}

]  

})

一般：1.先写好链接  2.放占位符  3.路由规则

路由组件与非路由组件的区别：

1.路由组件一般放置在pages|views文件夹，非路由组件一般放置components文件夹中

2.路由组件一般需要在router文件夹中进行注册（使用的即为组件的名字），非路由组件在使用的时候，一般都是以标签的形式使用

3.注册完路由，不管路由还是非路由身上都有$route和$router属性

$route:一般获取路由信息【路径、query、params等等】

$router:一般进行编程式导航进行路由跳转[push|replace]