安装路由
1. 用手脚架创建一个项目；
2.在项目位置打开终端，安装路由
npm install vue-router --save-dev-
npm install vue-router --save
-安装到开发环境
npm install vue-router --save-dev
-安装到生产环境
npm install vue-router --save
在 package.json 文件里可以看到，使用 --save-dev 安装的 插件，被写入到 devDependencies对象里面去，
而使用 --save 安装的插件，则是被写入到 dependencies对象里面去。
package.json 文件里面的 devDependencies 和 dependencies 的区别就是
devDependencies 里面的插件只用于开发环境，不用于生产环境，
而 dependencies 是需要发布到生产环境的。
配置
1. 在src文件夹新建router文件夹，在router文件夹新建index.js
配置index.js
图七.jpg
2.在src文件夹新建一个文件夹，在该文件夹内新建vue组件，然后在index.js文件配置路由
@（别名）代表 src
当你访问以film结尾的路径，就会对应访问views文件夹下的film组件
path:'./film'
component:()=>import('@/views/film')
当然访问film结尾的路径，就会对应
图八.jpg
3.在main.js导入index.js,放入vue的实例中
图九.jpg
4. 运行vue serve ./src/main.js
/**
* 配置vue-router
*
*/
import Vue from 'vue';
import VueRouter from 'vue-router';
//使用插件，用use
Vue.use(VueRouter);
//路由的数组
//routes 是指定字符，不能乱写
export const routes =[
{
path: '/',
// 重定向 打开跟路由的时候，跳转到cinema
redirect: '/cinema'
},
{
//访问路径
path: '/film',
//访问film的时候，显示以下组件
component: ()=>import('@/views/film'),
//配置子路由
children: [
{
// 两种写法
//path: '/film/list' ,
path: 'list',
component: ()=>import('@/views/film/list')
},
{ //动态路由， :id 表示id作为参数传过去，而不是路由地址
path: 'detail/:id',
component: ()=>import('@/views/film/detail')
}
]
},
{
path: '/cinema',
component:()=>import('@/views/cinema')
},
{
path: '/pintuan',
component:()=>import('@/views/pintuan')
},
{
path: '/my',
component:()=>import('@/views/my')
},
//404 路由
{
path: '*',
component:()=>import('@/components/nothing')
},
//路由传参
{
path:'/abc/demo1',
component:()=>import('@/views/abc/demo1')
},
{
path:'/abc/demo2/:id',
component:()=>import('@/views/abc/demo2')
}
]
//实例化 VueRouter
//新建一个 VueRouter对象，命名为 router
//把上面的路由数组routers 赋值给 router
const router = new VueRouter({
routes
})
//导出router
export default router;
mian.js
import Vue from 'vue'
import App from './App.vue'
import '@/assets/css/reset.css'
import '@/assets/iconfont/iconfont.css';
import Vant from 'vant';
import 'vant/lib/index.css';
import index from '@/router/index.js'
Vue.use(Vant);
Vue.config.productionTip = false
new Vue({
router:index,// 属性名必须是router
render: h => h(App),
}).$mount('#app')
/**
* 引入变量名可以随意定义
* import router from '@/router/index.js'
*
* Vue对象里的属性名必须是router
*
* new Vue({
* router,
* render: h => h(App),
* }).$mount('#app')
*
*
*
* */
index.js
// 导入路由
import Vue from 'vue';
// 变量名可以随意定义，要跟use里一致
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = [
{
path:'/',
name:"Home",
component:()=>import('@/view/Home')
},
{
path:'/abc',
name:"abc",
component:()=>import('@/view/abc')
},
{
path:'/footer',
name:"Footer",
component:()=>import('@/components/Footer')
}
];
// 变量名随意定义，要跟导出变量一致
const routerddd = new VueRouter({
routes
});
export default routerddd;
App.vue
<template>
<div id="app">
//路由入口，即是路由对应的组件展示在这个位置
<router-view></router-view>
</div>
</template>
<script>
// import Home from "@/view/Home.vue";
export default {
name: "app",
components: {
// Home
}
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>
//路由跳转用<router-link to ='路径'></router-link>
<router-link to='/home'>跳转到跟路由下的home路径</router-link>
//router-link 是超链接 使用 tag把超链接变成div
<router-link to='/home' tag='div'>跳转到跟路由下的home路径</router-link>
编程式导航
编程式导航.jpg
