1014人阅读
Vue2路由问题汇总
一：在main.js文件里配置了路由，可是页面不生效问题
1.没有设置路由的入口，需要在app.vue里设置路由的入口router-view
&template&
&div id=&app& class=&container&&
&router-view v-wechat-title=&$route.meta.title&&&/router-view&
&/template&
二：动态路由匹配的问题
1.注意一下vue2与vue1动态路由匹配的写法区别
//vue2动态路由匹配的写法区别
const routes =[
path: '/goods',
component: goods
path: '/ratings',
component: ratings
path: '/seller',
component: seller
const router = new VueRouter({
el: '#app',
render: h =& h(App)
//vue1动态路由匹配的写法区别
let router = new VueRouter({});
router.map({
'/goods': {
component: goods
'/ratings': {
component: ratings
'seller': {
component: seller
router.start(app, '#app');
三：路由地址包含有#的问题
1.vue-router默认hash模式,需要设置 mode: 'history'，同时还需要在后台进行配置，详情请看
四：嵌套路由问题
1.上一级的路由必须设置路由入口router-view
import Vue from 'vue';
import VueRouter from 'vue-router';
import VueResource from 'vue-resource';
................
import frame from 'components/frame.vue';//设置路由入口
import goods from 'components/goods/goods.vue';
import ratings from 'components/goods/ratings.vue';
import seller from 'components/goods/seller.vue';
-----------------------------------------------------
//并且配置路由器规则
const routes =[
path:'/goods',
component: frame,
children: [
{ path: '/',component: goods},
{ path: 'ratings',component:ratings}}
'seller': {
component: seller
const router = new VueRouter({
-----------------------------------------------------
//frame.vue文件：
&template&
&div class=&routes&&
&router-view&&/router-view&
&/template&
import Vue from 'vue';
import VueRouter from 'vue-router';
import VueResource from 'vue-resource';
................
import goods from 'components/goods/goods.vue';
import ratings from 'components/goods/ratings.vue';
import seller from 'components/goods/seller.vue';
-----------------------------------------------------
//并且配置路由器规则
const routes =[
path:'/goods',
component: goods,
children: [
{ path: 'ratings',component:ratings}}
'seller': {
component: seller
const router = new VueRouter({
-----------------------------------------------------
//goods.vue文件必须含有：
&router-view&&/router-view&
五：设置网页title的问题
1.使用vue-wechat-title插件:npm install vue-wechat-title
//使用方法
//1、头部引入该插件
import VueWechatTitle from 'vue-wechat-title';
//2、在路由中配置meta值
const routes =[
path:'/shop',
meta: {title: '我的店铺'},
component: shop
const router = new VueRouter({
//3、在页面中添加v-wechat-title
&router-view v-wechat-title=&$route.meta.title&&&/router-view&
六：当前路由激活时状态设置
1.在设置路由中设置linkActiveClass
//使用方法
const router = new VueRouter({
linkActiveClass: 'active',//激活时添加的类名：active
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：38151次
积分：1322
积分：1322
排名：千里之外
原创：91篇
转载：34篇
(2)(2)(8)(5)(12)(3)(1)(4)(4)(9)(9)(14)(1)(1)(6)(4)(1)(3)(4)(1)(1)(1)(2)(2)(9)(5)(3)(3)(2)(3)
(window.slotbydup = window.slotbydup || []).push({
id: '4740881',
container: s,
size: '200,200',
display: 'inlay-fix'Vue基础(3)UI框架、路由、状态管理及Ajax请求_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
Vue基础(3)UI框架、路由、状态管理及Ajax请求
阅读已结束，下载文档到电脑
想免费下载更多文档？
定制HR最喜欢的简历
你可能喜欢vue和express结合问题 - CNode技术社区
这家伙很懒，什么个性签名都没有留下。
用express做的话，路由指向多个ejs或者是jade，而vue使用webpack打包的话，要指向一个入口文件吧，那么多个路由对应的多个文件，每一个都是一个入口文件吧？那么就需要打包多次吧？而且express做的项目是jade或者是ejs的模板的，可以作为入口文件吗？如果不行的话怎么指向一个html文件？用webpack打包的话，默认浏览器开一个localhost:8080的地址指向入口文件，那么我们有用express做的服务器，默认是localhsot:3000的，用webpack打包时怎么指向这个地址啊？需要改变指向的地址吗？
具体怎么把vue和一个express或者是koa项目结合起来做，不是很了解，麻烦大神指点下
一个前端一个后端，你是怎么扯到一块的
虽然不知道你在胡说八道什么，不过不知道我弄的脚手架是不是你想要的
干什么用的？
是啊确实不懂楼主在讲什么?
牛逼啊，看不懂
1、webpack的入口文件是指你要打包的主文件入口，你有多个入口文件也可以在配置文件中指定多个，可以一次打包生成，不需要打包多次。
2、你所说的路由，是指spa当中的路由，比如vue-router，还是指Express当中的路由？
3、express用的ejs等那是前端模板，方便接收后台传回的数据并呈现到页面上开发用的，而你用了vue，基本不用ejs这些模板了，也就不存在你说的把ejs模板当作webpack的入口文件一说。
4、你所说的webpack指定的是8080端口，那是你在构建时用webpack-dev-server建的一个临时服务器,是一个简化版的express服务器，而你用express又是建的另一个服务器，是两个服务器，都可以访问你项目中的文件。为什么要重新指向？
5、建议先把各种关系理清再说。
SO，要将vue和express结合起来用，你得把express和vue分开来看，vue作前端开发，express作为你的服务器去访问那些生成的文件。
把所有路由入口指向同一个模板,然后通过vue-router判断地址,载入不同的页面,可以参考
ps：楼主先了解一下路由解析，前后端的区别
这个项目数据库用的是什么？
我写的测试调用json文件数据,没走数据库.如果你要走数据库自己分个api路径出来做CURD就好了
我也是和你一样的困惑，不过看了这个，
或者使用vue-cli写前端页面，要和后台联调时，使用npm start build，将vue项目编译成html、js、css形式，直接用express去调用index.html，就 ok 了。
CNode 社区为国内最专业的 Node.js 开源技术社区，致力于 Node.js 的技术研究。
服务器赞助商为
，存储赞助商为
，由提供应用性能服务。
新手搭建 Node.js 服务器，推荐使用无需备案的在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Title&/title&
&script src="vue.js"&&/script&
&script src="node_modules/vue-router/dist/vue-router.js"&&/script&
.router-link-active {
font-size: 20
&div id="box"&
&router-link to='/home'&主页&/router-link&
&router-link to='/news'&新闻&/router-link&
&!--路由配置的组件将会渲染在这里--&
&router-view&&/router-view&
&template id="home"&
&h3&我是主页&/h3&
&router-link to='/home/login'&登陆&/router-link&
&router-link to='/home/resgist'&注册&/router-link&
&h2&{{$route.params.id}}&/h2&
&router-view&&/router-view&
&/template&
&template id="news"&
&h3&我是新闻&/h3&
&router-link to='/news/detail'&详细&/router-link&
&router-view&&/router-view&
&/template&
&template id="login"&
&p&请登录&/p&
&router-view&&/router-view&
&/template&
&template id="resgist"&
&p&请注册&/p&
&router-view&&/router-view&
&/template&
&template id="detail"&
&router-view&&/router-view&
&/template&
var Home = {
template: '#home'
var News = {
template: '#news'
var Login = {
template: '#login'
var Resgist = {
template: '#resgist'
var Detail = {
template: '#detail'
//创建router实例
var router = new VueRouter({
path: '/home/:id', component: Home,
children: [
{path: 'login', component: Login},
{path: 'resgist', component: Resgist}
path: '/news/:id', component: News, children: [
{path: 'detail', component: Detail}
//创建和挂载根实例
var app = new Vue({
router: router
}).$mount('#box');
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
你都写错了哦
你看看这是可以是实现的
我只修改了home 组件
其他的都差不多
然后访问home组件就可以
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Title&/title&
&script src="vue.js"&&/script&
&script src="vue-router.js"&&/script&
.router-link-active {
font-size: 20
&div id="box"&
&router-link to='/home'&主页&/router-link&
&router-link to='/news'&新闻&/router-link&
&!--路由配置的组件将会渲染在这里--&
&router-view&&/router-view&
&template id="home"&
&h3&我是主页&/h3&
&router-link to='/home/login'&登陆&/router-link&
&router-link to='/home/resgist'&注册&/router-link&
&h2&{{$route.params.id}}&/h2&
&router-view&&/router-view&
&/template&
&template id="news"&
&h3&我是新闻&/h3&
&router-link to='/news/detail'&详细&/router-link&
&router-view&&/router-view&
&/template&
&template id="login"&
&p&请登录&/p&
&router-view&&/router-view&
&/template&
&template id="resgist"&
&p&请注册&/p&
&router-view&&/router-view&
&/template&
&template id="detail"&
&router-view&&/router-view&
&/template&
var homeStr = document.querySelector('#home').innerHTML;
console.log(homeStr);
var Home = {
template: homeStr
var News = {
template: '#news'
var Login = {
template: '#login'
var Resgist = {
template: '#resgist'
var Detail = {
template: '#detail'
//创建router实例
var router = new VueRouter({
path: '/home/:id', component: Home,
children: [
{path: 'login', component: Login},
{path: 'resgist', component: Resgist}
path: '/news/:id', component: News, children: [
{path: 'detail', component: Detail}
//创建和挂载根实例
var app = new Vue({
router: router
}).$mount('#box');
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。}