npm install
npm run serve
npm run build
-assets
-components
-router
|-modules
|-news.js
|-user.js
|-index.js
-store
-views
|-news
|-components
|-news1.vue
|-news2.vue
|-index.vue
|-user
|-index.vue
|-Home.vue
|-app.less
|-app.vue
|-main.js
...
src / router / index.js 文件
路由由上往下依次进行匹配知道找到相匹配的路径,当所有路径都不匹配的时候,重定向到 404页面
import Vue from "vue";
import VueRouter from "vue-router";
// 引入 News 和 User 两个模块
import News from "./modules/news"
import User from "./modules/user"
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "Home",
component: () => import("@/views/Home.vue")
},
{
path: "/404",
name: "NotFound",
component: () => import("@/404.vue")
},
News, User,
{
path: '*', // 输入的路径在routes里面没有匹配到的时候,重定向到404页面
redirect: '/404'
}
];
const router = new VueRouter({
mode: "history", // 路由模式 history
base: process.env.BASE_URL, // vue.config.js 配置基础地址
routes
});
// 添加导航守卫 -- to:准备要进入的路由对象,from:即将离开的路由对象,next()
// 例如:可以在路由跳转之前判断用户是否登录,没有登陆的话重定向到 login页面
// router.beforeEach((to, from, next) => {
// // ...
// })
export default router;
router / modules / news.js 文件
// news 模块路由
const NewsRoute = { // 注意:返回的格式是一个对象,不是一个数组!!
path: "/news",
// name: "News", // 因为news路径下有默认加载的模块 news1 ,所以此处的name属性省去
component: () => import("@/views/news/index.vue"),
children: [
{
path: "", // 进入news页面是默认首先显示此组件
component: () => import("@/views/news/components/news1.vue"),
},
{
path: "news2",
component: () => import("@/views/news/components/news2.vue"),
}
]
}
export default NewsRoute
home 页面跳转到 news页面:
注意:官方文档有备注,使用this.$router.push( { path:'/news' , params:{id:123} } )时,params不生效,需要把prams替换为query,导航栏路径里面会显示参数信息
或者使用 this.$router.push( { name:'路由配置的name' , params:{id:123} } ) 这种形式来进行传递参数
1. 不带参数
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
2. query传参
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
// html 取参 $route.query.id
// script 取参 this.$route.query.id
3. params传参
this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name
// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
// html 取参 $route.params.id
// script 取参 this.$route.params.id
4. query和params区别
query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在
params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失